Add saved signature presets

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

.github/workflows/ci-cd.yml

@@ -0,0 +1,85 @@
+name: CI/CD
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+          cache-dependency-path: app/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+  build-and-push:
+    name: Build and push image (dev)
+    needs: test
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract image metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=dev
+            type=sha,prefix=dev-
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: ./app
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Summary
+        run: |
+          echo "### Dev image published :rocket:" >> "$GITHUB_STEP_SUMMARY"
+          echo "" >> "$GITHUB_STEP_SUMMARY"
+          echo '```' >> "$GITHUB_STEP_SUMMARY"
+          echo "${{ steps.meta.outputs.tags }}" >> "$GITHUB_STEP_SUMMARY"
+          echo '```' >> "$GITHUB_STEP_SUMMARY"

README.md

@@ -20,3 +20,31 @@ docker compose up --build
 Then open `http://localhost:3001` and create an account. PostgreSQL data is kept
 in the `postgres-data` Docker volume, so it survives app and container restarts.
 To remove the database as well, run `docker compose down -v`.
+
+## CI/CD
+
+On every push to `main`, GitHub Actions (`.github/workflows/ci-cd.yml`) runs the
+test suite, then builds and publishes a dev image to the GitHub Container
+Registry:
+
+```
+ghcr.io/odweta/fakturovac:dev
+```
+
+A commit-pinned tag (`ghcr.io/odweta/fakturovac:dev-<short-sha>`) is published
+alongside `:dev` for traceability. Pull requests only run the test job.
+
+To pull and run the latest dev image in a testing environment:
+
+```bash
+docker login ghcr.io -u <your-github-username>   # only needed if the package is private
+docker pull ghcr.io/odweta/fakturovac:dev
+docker run -d -p 3001:3001 \
+  -e DATABASE_URL=postgres://fakturovac:fakturovac@<db-host>:5432/fakturovac \
+  -e NODE_ENV=production \
+  ghcr.io/odweta/fakturovac:dev
+```
+
+The package's visibility (public/private) is managed under the repository's
+**Packages** settings on GitHub; no extra secrets are required since the
+workflow authenticates with the built-in `GITHUB_TOKEN`.

app/src/app.js

@@ -5,12 +5,12 @@ const archiver = require('archiver');
 const PDFDocument = require('pdfkit');
 const QRCode = require('qrcode');
 const { pool, initializeDatabase } = require('./db');
-const { normalizeInvoiceData } = require('./invoice-data');
+const { isValidSignatureDataUrl, normalizeInvoiceData } = require('./invoice-data');
 
 const app = express();
 const sessionDurationMs = 1000 * 60 * 60 * 24 * 30;
 
-app.use(express.json());
+app.use(express.json({ limit: '2mb' }));
 
 const hashPassword = (password, salt = crypto.randomBytes(16).toString('hex')) => new Promise((resolve, reject) => {
     crypto.scrypt(password, salt, 64, (error, derivedKey) => {
@@ -227,6 +227,33 @@ app.put('/api/supplier', requireAuth, async (req, res, next) => {
     }
 });
 
+app.get('/api/settings', requireAuth, async (req, res, next) => {
+    try {
+        const result = await pool.query('SELECT invoice_starting_number FROM user_settings WHERE user_id = $1', [req.userId]);
+        res.json({ settings: { invoiceStartingNumber: result.rowCount ? result.rows[0].invoice_starting_number : 1 } });
+    } catch (error) {
+        next(error);
+    }
+});
+
+app.put('/api/settings', requireAuth, async (req, res, next) => {
+    try {
+        const invoiceStartingNumber = Number.parseInt(req.body.invoiceStartingNumber, 10);
+        if (!Number.isInteger(invoiceStartingNumber) || invoiceStartingNumber < 1) {
+            res.status(400).json({ error: 'Počáteční číslo faktury musí být kladné celé číslo.' });
+            return;
+        }
+        const result = await pool.query(`
+            INSERT INTO user_settings (user_id, invoice_starting_number) VALUES ($1, $2)
+            ON CONFLICT (user_id) DO UPDATE SET invoice_starting_number = EXCLUDED.invoice_starting_number
+            RETURNING invoice_starting_number
+            `, [req.userId, invoiceStartingNumber]);
+        res.json({ settings: { invoiceStartingNumber: result.rows[0].invoice_starting_number } });
+    } catch (error) {
+        next(error);
+    }
+});
+
 app.get('/api/clients', requireAuth, async (req, res, next) => {
     try {
         const result = await pool.query('SELECT * FROM clients WHERE user_id = $1 ORDER BY created_at, id', [req.userId]);
@@ -335,6 +362,57 @@ app.delete('/api/payment-presets/:id', requireAuth, async (req, res, next) => {
     }
 });
 
+const signaturePresetResponse = (row) => ({
+    id: row.id,
+    name: row.name,
+    dataUrl: row.data_url
+});
+
+app.get('/api/signature-presets', requireAuth, async (req, res, next) => {
+    try {
+        const result = await pool.query(
+            'SELECT * FROM signature_presets WHERE user_id = $1 ORDER BY name',
+            [req.userId]
+        );
+        res.json({ presets: result.rows.map(signaturePresetResponse) });
+    } catch (error) {
+        next(error);
+    }
+});
+
+app.post('/api/signature-presets', requireAuth, async (req, res, next) => {
+    try {
+        const name = String(req.body.name || '').trim();
+        const dataUrl = req.body.dataUrl;
+        if (!name) {
+            res.status(400).json({ error: 'Zadejte název podpisu.' });
+            return;
+        }
+        if (!isValidSignatureDataUrl(dataUrl)) {
+            res.status(400).json({ error: 'Podpis musí být platný obrázek JPG nebo PNG.' });
+            return;
+        }
+        const result = await pool.query(`
+            INSERT INTO signature_presets (user_id, name, data_url)
+            VALUES ($1, $2, $3)
+            ON CONFLICT (user_id, name) DO UPDATE SET data_url = EXCLUDED.data_url
+            RETURNING *
+        `, [req.userId, name, dataUrl]);
+        res.status(201).json({ preset: signaturePresetResponse(result.rows[0]) });
+    } catch (error) {
+        next(error);
+    }
+});
+
+app.delete('/api/signature-presets/:id', requireAuth, async (req, res, next) => {
+    try {
+        await pool.query('DELETE FROM signature_presets WHERE id = $1 AND user_id = $2', [req.params.id, req.userId]);
+        res.status(204).end();
+    } catch (error) {
+        next(error);
+    }
+});
+
 const invoiceResponse = (row) => ({
     id: row.id,
     invoiceNumber: row.invoice_number,
@@ -376,13 +454,21 @@ app.post('/api/invoices', requireAuth, async (req, res, next) => {
 
         const invoiceYear = new Date().getFullYear();
         await client.query('BEGIN');
+        const settingsResult = await client.query(
+            'SELECT invoice_starting_number FROM user_settings WHERE user_id = $1',
+            [req.userId]
+        );
+        const invoiceStartingNumber = settingsResult.rowCount ? settingsResult.rows[0].invoice_starting_number : 1;
         await client.query(`
             INSERT INTO invoice_counters (user_id, invoice_year, last_number)
-            SELECT $1, $2, COALESCE(MAX((substring(invoice_number FROM '^F-[0-9]{4}-([0-9]+)$'))::integer), 0)
+            SELECT $1, $2, GREATEST(
+                COALESCE(MAX((substring(invoice_number FROM '^F-[0-9]{4}-([0-9]+)$'))::integer), 0),
+                $4 - 1
+            )
             FROM invoices
             WHERE user_id = $1 AND invoice_number LIKE $3
             ON CONFLICT (user_id, invoice_year) DO NOTHING
-        `, [req.userId, invoiceYear, `F-${invoiceYear}-%`]);
+        `, [req.userId, invoiceYear, `F-${invoiceYear}-%`, invoiceStartingNumber]);
         const counterResult = await client.query(`
             UPDATE invoice_counters
             SET last_number = last_number + 1
@@ -445,6 +531,20 @@ app.delete('/api/invoices', requireAuth, async (req, res, next) => {
 });
 
 const pdfText = (value) => String(value || 'Neuvedeno');
+const formatCzechDate = (value) => {
+    const date = new Date(`${value}T00:00:00`);
+    return Number.isNaN(date.getTime()) ? '' : date.toLocaleDateString('cs-CZ');
+};
+const toDateInputValue = (date) => date.toISOString().slice(0, 10);
+const resolveIssueDate = (issueDate) => issueDate || toDateInputValue(new Date());
+const resolveDueDate = (dueDate, issueDate) => {
+    if (dueDate) {
+        return dueDate;
+    }
+    const due = new Date(`${resolveIssueDate(issueDate)}T00:00:00`);
+    due.setDate(due.getDate() + 14);
+    return toDateInputValue(due);
+};
 const formatCzechNumber = (value) => Number(value || 0).toLocaleString('cs-CZ', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
@@ -481,7 +581,7 @@ const buildPaymentQrPayload = (payment, total, invoiceNumber = '') => {
     ].filter(Boolean).join('*');
 };
 
-const appendInvoicePdf = async (archive, invoice) => {
+const renderInvoicePdf = async (document, invoice) => {
     const data = invoice.invoice_data || {};
     const supplier = data.supplier || {};
     const customer = data.customer || {};
@@ -492,7 +592,6 @@ const appendInvoicePdf = async (archive, invoice) => {
     const customerName = customer.typSubjektu === 'spolecnost'
         ? customer.nazevSpolecnosti
         : [customer.jmeno, customer.prijmeni].filter(Boolean).join(' ');
-    const document = new PDFDocument({ size: 'A4', margin: 50 });
     const regularFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf';
     const boldFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf';
     const qrPayload = buildPaymentQrPayload(payment, data.total, invoice.invoice_number);
@@ -501,14 +600,13 @@ const appendInvoicePdf = async (archive, invoice) => {
         width: 180,
         margin: 1
     }) : null;
+    const signatureBuffer = data.signature ? Buffer.from(data.signature.split(',')[1], 'base64') : null;
     const pageWidth = document.page.width - document.page.margins.left - document.page.margins.right;
     const navy = '#183b56';
-    const blue = '#2b6f8f';
     const line = '#d8d4cc';
     const lightBlue = '#f4f7fb';
     const warm = '#fffaf0';
     const bodyText = '#17202a';
-    const muted = '#65717d';
     const address = (profile) => [
         profile.uliceCp,
         [profile.psc, profile.mesto].filter(Boolean).join(', ')
@@ -521,14 +619,25 @@ const appendInvoicePdf = async (archive, invoice) => {
     const partyWidth = (pageWidth - 24) / 2;
     const customerX = document.page.margins.left + partyWidth + 24;
 
-    archive.append(document, { name: `${invoice.invoice_number}.pdf` });
+    const issueDate = resolveIssueDate(data.issueDate);
+    const dueDate = resolveDueDate(data.dueDate, data.issueDate);
+
     const headerY = document.y;
     document.fillColor(navy).font(boldFont).fontSize(25).text('Faktura', document.page.margins.left, headerY);
     document.fillColor(navy).font(boldFont).fontSize(16).text(invoice.invoice_number, customerX, headerY, {
         width: partyWidth,
         align: 'right'
     });
-    document.y = headerY + 40;
+    document.fillColor(bodyText).font(regularFont).fontSize(9)
+        .text(`Datum vystavení: ${formatCzechDate(issueDate)}`, customerX, headerY + 22, {
+            width: partyWidth,
+            align: 'right'
+        })
+        .text(`Datum splatnosti: ${formatCzechDate(dueDate)}`, customerX, headerY + 35, {
+            width: partyWidth,
+            align: 'right'
+        });
+    document.y = headerY + 52;
 
     const partyTop = document.y;
     const drawParty = (x, title, profile, name) => {
@@ -543,28 +652,29 @@ const appendInvoicePdf = async (archive, invoice) => {
 
     const tableTop = document.y + 12;
     const columns = [0, pageWidth * 0.52, pageWidth * 0.68, pageWidth * 0.82, pageWidth];
-    const rowHeight = 25;
-    document.rect(document.page.margins.left, tableTop, pageWidth, rowHeight).fill('#eef1f3');
+    const headerRowHeight = 25;
+    const itemRowHeight = 22.5;
+    document.rect(document.page.margins.left, tableTop, pageWidth, headerRowHeight).fill('#eef1f3');
     document.fillColor(navy).font(boldFont).fontSize(9);
     ['Položka', 'Množství', 'MJ', 'Cena za MJ'].forEach((heading, index) => {
         document.text(heading, document.page.margins.left + columns[index] + 6, tableTop + 8, {
             width: columns[index + 1] - columns[index] - 12
         });
     });
-    document.y = tableTop + rowHeight;
+    document.y = tableTop + headerRowHeight;
     (data.items || []).forEach((item, index) => {
         const rowTop = document.y;
-        document.rect(document.page.margins.left, rowTop, pageWidth, rowHeight)
+        document.rect(document.page.margins.left, rowTop, pageWidth, itemRowHeight)
             .fill(index % 2 ? lightBlue : warm);
-        document.moveTo(document.page.margins.left, rowTop + rowHeight)
-            .lineTo(document.page.margins.left + pageWidth, rowTop + rowHeight)
+        document.moveTo(document.page.margins.left, rowTop + itemRowHeight)
+            .lineTo(document.page.margins.left + pageWidth, rowTop + itemRowHeight)
             .strokeColor(line).lineWidth(0.7).stroke();
         document.fillColor(bodyText).font(regularFont).fontSize(9);
         [pdfText(item.popis), formatCzechNumber(item.mnozstvi), pdfText(item.mernaJednotka), `${formatCzechNumber(item.cenaZaMj)} Kč`]
-            .forEach((value, columnIndex) => document.text(value, document.page.margins.left + columns[columnIndex] + 6, rowTop + 8, {
+            .forEach((value, columnIndex) => document.text(value, document.page.margins.left + columns[columnIndex] + 6, rowTop + 6, {
                 width: columns[columnIndex + 1] - columns[columnIndex] - 12
             }));
-        document.y = rowTop + rowHeight;
+        document.y = rowTop + itemRowHeight;
     });
 
     document.y += 18;
@@ -576,20 +686,59 @@ const appendInvoicePdf = async (archive, invoice) => {
     document.y += 35;
     document.moveTo(document.page.margins.left, document.y).lineTo(document.page.margins.left + pageWidth, document.y)
         .strokeColor(navy).lineWidth(1.5).stroke();
-    document.y += 12;
-    const paymentTop = document.y;
-    document.roundedRect(document.page.margins.left, paymentTop, pageWidth, 165, 4).fillAndStroke('#f4f7fb', line);
+    const paymentCardHeight = 105;
+    const paymentTop = document.page.height - document.page.margins.bottom - paymentCardHeight;
+    const paymentLineHeight = 18;
+    const qrSize = paymentLineHeight * 3;
+    if (signatureBuffer) {
+        const signatureWidth = 145;
+        const signatureHeight = signatureWidth / 2;
+        const signatureGap = 8;
+        const signatureX = document.page.margins.left + pageWidth - signatureWidth;
+        document.image(signatureBuffer, signatureX, paymentTop - signatureGap - signatureHeight, {
+            fit: [signatureWidth, signatureHeight]
+        });
+    }
+    document.roundedRect(document.page.margins.left, paymentTop, pageWidth, paymentCardHeight, 4)
+        .fillAndStroke('#f4f7fb', line);
     document.fillColor(navy).font(boldFont).fontSize(11).text('Platební údaje', document.page.margins.left + 10, paymentTop + 10);
     document.fillColor(bodyText).font(regularFont).fontSize(10)
         .text(`Číslo účtu: ${pdfText(payment.cisloUctu)}`, document.page.margins.left + 10, paymentTop + 35)
-        .text(`IBAN: ${pdfText(payment.iban)}`, document.page.margins.left + 10, paymentTop + 55)
-        .text(`SWIFT: ${pdfText(payment.swift)}`, document.page.margins.left + 10, paymentTop + 75);
+        .text(`IBAN: ${pdfText(payment.iban)}`, document.page.margins.left + 10, paymentTop + 35 + paymentLineHeight)
+        .text(`SWIFT: ${pdfText(payment.swift)}`, document.page.margins.left + 10, paymentTop + 35 + paymentLineHeight * 2);
     if (qrBuffer) {
-        document.image(qrBuffer, document.page.margins.left + pageWidth - 155, paymentTop + 10, { width: 145, height: 145 });
+        document.image(qrBuffer, document.page.margins.left + pageWidth - qrSize - 10, paymentTop + 30, {
+            width: qrSize,
+            height: qrSize
+        });
     }
     document.end();
 };
 
+const appendInvoicePdf = async (archive, invoice) => {
+    const document = new PDFDocument({ size: 'A4', margin: 50 });
+    archive.append(document, { name: `${invoice.invoice_number}.pdf` });
+    await renderInvoicePdf(document, invoice);
+};
+
+app.post('/api/invoices/pdf', requireAuth, async (req, res, next) => {
+    try {
+        const data = normalizeInvoiceData(req.body.data);
+        if (!data) {
+            res.status(400).json({ error: 'Neplatná data faktury.' });
+            return;
+        }
+
+        const invoiceNumber = String(req.body.invoiceNumber || 'Nová faktura').trim() || 'Nová faktura';
+        const document = new PDFDocument({ size: 'A4', margin: 50 });
+        res.attachment(`${invoiceNumber}.pdf`);
+        document.pipe(res);
+        await renderInvoicePdf(document, { invoice_number: invoiceNumber, invoice_data: data });
+    } catch (error) {
+        next(error);
+    }
+});
+
 app.get('/api/invoices/export', requireAuth, async (req, res, next) => {
     try {
         const result = await pool.query(

app/src/db.js

@@ -65,6 +65,11 @@ const initializeDatabase = () => {
                 PRIMARY KEY (user_id, invoice_year)
             );
 
+            CREATE TABLE IF NOT EXISTS user_settings (
+                user_id INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+                invoice_starting_number INTEGER NOT NULL DEFAULT 1 CHECK (invoice_starting_number > 0)
+            );
+
             CREATE TABLE IF NOT EXISTS payment_presets (
                 id SERIAL PRIMARY KEY,
                 user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
@@ -76,6 +81,15 @@ const initializeDatabase = () => {
                 UNIQUE (user_id, name)
             );
 
+            CREATE TABLE IF NOT EXISTS signature_presets (
+                id SERIAL PRIMARY KEY,
+                user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+                name TEXT NOT NULL,
+                data_url TEXT NOT NULL,
+                created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+                UNIQUE (user_id, name)
+            );
+
             ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';
             ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS typ_subjektu TEXT NOT NULL DEFAULT 'osoba';
             ALTER TABLE clients ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';

app/src/invoice-data.js

@@ -1,3 +1,8 @@
+const SIGNATURE_DATA_URL_PATTERN = /^data:image\/(png|jpeg);base64,[A-Za-z0-9+/]+=*$/;
+
+const isValidSignatureDataUrl = (value) => typeof value === 'string'
+    && SIGNATURE_DATA_URL_PATTERN.test(value);
+
 const normalizeInvoiceData = (data) => {
     if (!data || !Array.isArray(data.items)) {
         return null;
@@ -16,13 +21,18 @@ const normalizeInvoiceData = (data) => {
         return null;
     }
 
+    const signature = isValidSignatureDataUrl(data.signature)
+        ? data.signature
+        : null;
+
     return {
         supplier: data.supplier || {},
         customer: data.customer || {},
         payment: data.payment || {},
         items,
+        signature,
         total: items.reduce((sum, item) => sum + item.mnozstvi * item.cenaZaMj, 0)
     };
 };
 
-module.exports = { normalizeInvoiceData };
+module.exports = { isValidSignatureDataUrl, normalizeInvoiceData };

app/src/static/index.html

@@ -65,11 +65,28 @@
                 <summary><span class="account-mark" aria-hidden="true"></span><span id="navEmail" class="signed-in-email"></span></summary>
                 <div class="nav-menu-content account-menu-content">
                     <button type="button" id="passwordButton" class="text-button">Změnit heslo</button>
+                    <button type="button" id="numberingSettingsButton" class="text-button">Číslování faktur</button>
                     <button type="button" id="logoutButton" class="text-button">Odhlásit se</button>
                 </div>
             </details>
         </nav>
 
+        <section id="numberingSettingsPanel" class="password-panel" hidden>
+            <div id="numberingSettingsForm">
+                <h3>Číslování faktur</h3>
+                <div class="form-group">
+                    <label for="invoiceStartingNumber">Počáteční číslo faktury (pro aktuální rok)</label>
+                    <input id="invoiceStartingNumber" type="number" min="1" step="1" placeholder="1" />
+                    <p class="field-hint">Určuje, od jakého čísla se budou generovat nové faktury v roce, kdy zatím žádnou nemáte. Výchozí hodnota je 1.</p>
+                </div>
+                <div class="saved-data-actions">
+                    <button type="button" id="saveNumberingSettingsButton">Uložit</button>
+                    <button type="button" id="cancelNumberingSettingsButton" class="secondary-button">Zrušit</button>
+                    <span id="numberingSettingsStatus" role="status" aria-live="polite"></span>
+                </div>
+            </div>
+        </section>
+
         <section id="passwordPanel" class="password-panel" hidden>
             <div id="passwordForm">
                 <h3>Změnit heslo</h3>
@@ -308,13 +325,39 @@
 
                     <div class="due-date-group">
                         <div class="form-group">
-                            <label for="dueDateOption">Datum splatnosti</label>
-                            <select id="dueDateOption">
-                                <option value="14">14 dní</option>
-                                <option value="30">30 dní</option>
+                            <label for="issueDate">Datum vystavení</label>
+                            <input type="date" id="issueDate" name="issueDate" placeholder="Dnešní datum" />
+                        </div>
+                        <div class="form-group">
+                            <label for="dueDate">Datum splatnosti</label>
+                            <input type="date" id="dueDate" name="dueDate" placeholder="14 dní od vystavení" />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-chapter signature-row">
+                    <div class="form-group signature-group">
+                        <label for="signatureInput">Podpis (nepovinné)</label>
+                        <div class="form-group">
+                            <label for="signaturePresetSelect">Uložený podpis</label>
+                            <select id="signaturePresetSelect">
+                                <option value="">Vyberte podpis</option>
                             </select>
                         </div>
-                        <output id="dueDateDisplay" class="due-date-display"></output>
+                        <div id="signatureDropzone" class="signature-dropzone" tabindex="0" role="button" aria-label="Nahrát podpis kliknutím nebo přetažením souboru">
+                            <img id="signaturePreview" class="signature-preview" alt="Náhled podpisu" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" hidden />
+                            <p id="signatureDropzoneText" class="signature-dropzone-text">Přetáhněte sem obrázek podpisu (420×210 px, JPG nebo PNG) nebo klikněte pro výběr souboru</p>
+                            <input type="file" id="signatureInput" accept="image/png,image/jpeg" hidden />
+                        </div>
+                        <div class="signature-save-row">
+                            <input id="signaturePresetName" type="text" placeholder="Název podpisu" aria-label="Název podpisu" />
+                            <button type="button" id="saveSignaturePresetButton">Uložit podpis</button>
+                            <button type="button" id="deleteSignaturePresetButton" class="secondary-button" disabled>Smazat</button>
+                        </div>
+                        <div class="signature-actions">
+                            <button type="button" id="removeSignatureButton" class="secondary-button" hidden>Odstranit podpis</button>
+                        </div>
+                        <p id="signatureStatus" class="signature-status" role="status" aria-live="polite"></p>
                     </div>
                 </div>
 

app/src/static/script.js

@@ -40,11 +40,27 @@ const passwordForm = document.getElementById("passwordForm");
 const savePasswordButton = document.getElementById("savePasswordButton");
 const cancelPasswordButton = document.getElementById("cancelPasswordButton");
 const passwordStatus = document.getElementById("passwordStatus");
-const dueDateOption = document.getElementById("dueDateOption");
-const dueDateDisplay = document.getElementById("dueDateDisplay");
+const numberingSettingsButton = document.getElementById("numberingSettingsButton");
+const numberingSettingsPanel = document.getElementById("numberingSettingsPanel");
+const invoiceStartingNumberInput = document.getElementById("invoiceStartingNumber");
+const saveNumberingSettingsButton = document.getElementById("saveNumberingSettingsButton");
+const cancelNumberingSettingsButton = document.getElementById("cancelNumberingSettingsButton");
+const numberingSettingsStatus = document.getElementById("numberingSettingsStatus");
+const issueDateInput = document.getElementById("issueDate");
+const dueDateInput = document.getElementById("dueDate");
 const paymentPresetSelect = document.getElementById("paymentPresetSelect");
 const paymentPresetName = document.getElementById("paymentPresetName");
 const savePaymentPresetButton = document.getElementById("savePaymentPresetButton");
+const signatureDropzone = document.getElementById("signatureDropzone");
+const signatureInput = document.getElementById("signatureInput");
+const signaturePreview = document.getElementById("signaturePreview");
+const signatureDropzoneText = document.getElementById("signatureDropzoneText");
+const removeSignatureButton = document.getElementById("removeSignatureButton");
+const signatureStatus = document.getElementById("signatureStatus");
+const signaturePresetSelect = document.getElementById("signaturePresetSelect");
+const signaturePresetName = document.getElementById("signaturePresetName");
+const saveSignaturePresetButton = document.getElementById("saveSignaturePresetButton");
+const deleteSignaturePresetButton = document.getElementById("deleteSignaturePresetButton");
 const loadPaymentPresetButton = document.getElementById("loadPaymentPresetButton");
 const deletePaymentPresetButton = document.getElementById("deletePaymentPresetButton");
 
@@ -66,8 +82,161 @@ let itemIndex = 0;
 let clients = [];
 let invoices = [];
 let paymentPresets = [];
+let signaturePresets = [];
 let currentInvoiceId = null;
 let isRegistrationMode = false;
+let signatureDataUrl = null;
+
+const SIGNATURE_WIDTH = 420;
+const SIGNATURE_HEIGHT = 210;
+
+const setSignatureStatus = (message, isError = false) => {
+    signatureStatus.textContent = message || "";
+    signatureStatus.classList.toggle("is-error", Boolean(isError));
+};
+
+const applySignaturePreview = (dataUrl) => {
+    signatureDataUrl = dataUrl || null;
+    if (signatureDataUrl) {
+        signaturePreview.src = signatureDataUrl;
+        signaturePreview.hidden = false;
+        signatureDropzoneText.hidden = true;
+        removeSignatureButton.hidden = false;
+    } else {
+        signaturePreview.hidden = true;
+        signaturePreview.removeAttribute("src");
+        signatureDropzoneText.hidden = false;
+        removeSignatureButton.hidden = true;
+    }
+};
+
+const renderSignaturePresetOptions = (selectedId = signaturePresetSelect.value) => {
+    signaturePresetSelect.innerHTML = "<option value=\"\">Vyberte podpis</option>";
+    signaturePresets.forEach((preset) => {
+        const option = document.createElement("option");
+        option.value = preset.id;
+        option.textContent = preset.name;
+        signaturePresetSelect.appendChild(option);
+    });
+    signaturePresetSelect.value = selectedId;
+    deleteSignaturePresetButton.disabled = !signaturePresetSelect.value;
+};
+
+const loadSignaturePresets = async () => {
+    const response = await apiRequest("/api/signature-presets");
+    signaturePresets = response.presets;
+    renderSignaturePresetOptions();
+};
+
+const readImageDimensions = (dataUrl) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight });
+    image.onerror = () => reject(new Error("Obrázek se nepodařilo načíst."));
+    image.src = dataUrl;
+});
+
+const handleSignatureFile = async (file) => {
+    if (!file) {
+        return;
+    }
+    if (!["image/png", "image/jpeg"].includes(file.type)) {
+        setSignatureStatus("Podporovány jsou pouze soubory JPG nebo PNG.", true);
+        return;
+    }
+    try {
+        const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(new Error("Soubor se nepodařilo načíst."));
+            reader.readAsDataURL(file);
+        });
+        const { width, height } = await readImageDimensions(dataUrl);
+        if (width !== SIGNATURE_WIDTH || height !== SIGNATURE_HEIGHT) {
+            setSignatureStatus(`Obrázek musí mít rozměry přesně ${SIGNATURE_WIDTH}×${SIGNATURE_HEIGHT} px (nahráno ${width}×${height} px).`, true);
+            return;
+        }
+        applySignaturePreview(dataUrl);
+        setSignatureStatus("Podpis byl nahrán.");
+    } catch (error) {
+        setSignatureStatus(error.message, true);
+    }
+};
+
+signatureDropzone.addEventListener("click", () => signatureInput.click());
+signatureDropzone.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        signatureInput.click();
+    }
+});
+signatureDropzone.addEventListener("dragover", (event) => {
+    event.preventDefault();
+    signatureDropzone.classList.add("is-dragover");
+});
+signatureDropzone.addEventListener("dragleave", () => {
+    signatureDropzone.classList.remove("is-dragover");
+});
+signatureDropzone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    signatureDropzone.classList.remove("is-dragover");
+    handleSignatureFile(event.dataTransfer.files[0]);
+});
+signatureInput.addEventListener("change", () => {
+    handleSignatureFile(signatureInput.files[0]);
+    signatureInput.value = "";
+});
+signaturePresetSelect.addEventListener("change", () => {
+    const preset = signaturePresets.find(({ id }) => String(id) === signaturePresetSelect.value);
+    deleteSignaturePresetButton.disabled = !preset;
+    if (preset) {
+        signaturePresetName.value = preset.name;
+        applySignaturePreview(preset.dataUrl);
+        setSignatureStatus("Uložený podpis načten.");
+    }
+});
+saveSignaturePresetButton.addEventListener("click", async () => {
+    if (!signatureDataUrl) {
+        setSignatureStatus("Nejprve nahrajte nebo vyberte podpis.", true);
+        return;
+    }
+    try {
+        const response = await apiRequest("/api/signature-presets", {
+            method: "POST",
+            body: JSON.stringify({
+                name: signaturePresetName.value,
+                dataUrl: signatureDataUrl
+            })
+        });
+        const preset = response.preset;
+        signaturePresets = [
+            ...signaturePresets.filter((entry) => entry.id !== preset.id && entry.name !== preset.name),
+            preset
+        ].sort((left, right) => left.name.localeCompare(right.name));
+        renderSignaturePresetOptions(String(preset.id));
+        signaturePresetName.value = preset.name;
+        setSignatureStatus("Podpis byl uložen.");
+    } catch (error) {
+        setSignatureStatus(error.message, true);
+    }
+});
+deleteSignaturePresetButton.addEventListener("click", async () => {
+    if (!signaturePresetSelect.value) {
+        return;
+    }
+    try {
+        await apiRequest(`/api/signature-presets/${signaturePresetSelect.value}`, { method: "DELETE" });
+        signaturePresets = signaturePresets.filter(({ id }) => String(id) !== signaturePresetSelect.value);
+        signaturePresetName.value = "";
+        renderSignaturePresetOptions();
+    } catch (error) {
+        setSignatureStatus(error.message, true);
+    }
+});
+removeSignatureButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    applySignaturePreview(null);
+    setSignatureStatus("");
+});
 
 const profileFieldMap = {
     nazevSpolecnosti: "NazevSpolecnosti",
@@ -108,17 +277,17 @@ const getClientLabel = (client) => [
 
 const formatCzechDate = (dateValue) => new Date(`${dateValue}T00:00:00`).toLocaleDateString("cs-CZ");
 
-const getDueDays = () => Number.parseInt(dueDateOption.value, 10) || 14;
+const toDateInputValue = (date) => date.toISOString().slice(0, 10);
+
+const getIssueDate = () => issueDateInput.value || toDateInputValue(new Date());
 
 const getDueDate = () => {
-    const dueDate = new Date();
-    dueDate.setHours(0, 0, 0, 0);
-    dueDate.setDate(dueDate.getDate() + getDueDays());
-    return dueDate.toISOString().slice(0, 10);
-};
-
-const updateDueDate = () => {
-    dueDateDisplay.textContent = `Splatnost: ${formatCzechDate(getDueDate())}`;
+    if (dueDateInput.value) {
+        return dueDateInput.value;
+    }
+    const dueDate = new Date(`${getIssueDate()}T00:00:00`);
+    dueDate.setDate(dueDate.getDate() + 14);
+    return toDateInputValue(dueDate);
 };
 
 const updateClientTypeFields = () => {
@@ -234,6 +403,8 @@ deletePaymentPresetButton.addEventListener("click", async () => {
 });
 
 const readInvoiceData = () => ({
+    issueDate: getIssueDate(),
+    dueDate: getDueDate(),
     supplier: {
         ...readProfileFields("dodavatel"),
         typSubjektu: supplierTypeSelect.value
@@ -247,6 +418,7 @@ const readInvoiceData = () => ({
         iban: getValue("iban"),
         swift: getValue("swift")
     },
+    signature: signatureDataUrl,
     total: Number.parseFloat(getValue("total").replace(",", ".")) || 0,
     items: Array.from(itemsContainer.querySelectorAll(".invoice-item")).map((item) => {
         const inputs = item.querySelectorAll("input");
@@ -263,6 +435,8 @@ const clearInvoiceEditor = () => {
     currentInvoiceId = null;
     invoiceNumberDisplay.textContent = "Nová faktura";
     invoiceSaveStatus.textContent = "";
+    issueDateInput.value = "";
+    dueDateInput.value = "";
     writeProfileFields("odberatel", {});
     clientSelect.value = "";
     clientTypeSelect.value = "osoba";
@@ -270,9 +444,14 @@ const clearInvoiceEditor = () => {
     paymentPresetSelect.value = "";
     paymentPresetName.value = "";
     deletePaymentPresetButton.disabled = true;
+    signaturePresetSelect.value = "";
+    signaturePresetName.value = "";
+    deleteSignaturePresetButton.disabled = true;
     ["cisloUctu", "iban", "swift"].forEach((id) => {
         document.getElementById(id).value = "";
     });
+    applySignaturePreview(null);
+    setSignatureStatus("");
     itemsContainer.replaceChildren();
     itemIndex = 0;
     updateTotal();
@@ -282,6 +461,8 @@ const loadInvoiceIntoEditor = (invoice) => {
     currentInvoiceId = invoice.id;
     invoiceNumberDisplay.textContent = invoice.invoiceNumber;
     invoiceSaveStatus.textContent = "";
+    issueDateInput.value = invoice.data.issueDate || "";
+    dueDateInput.value = invoice.data.dueDate || "";
     writeProfileFields("dodavatel", invoice.data.supplier || {});
     supplierTypeSelect.value = invoice.data.supplier?.typSubjektu || "osoba";
     updateSupplierTypeFields();
@@ -294,6 +475,11 @@ const loadInvoiceIntoEditor = (invoice) => {
     ["cisloUctu", "iban", "swift"].forEach((id) => {
         document.getElementById(id).value = invoice.data.payment?.[id] || "";
     });
+    applySignaturePreview(invoice.data.signature || null);
+    signaturePresetSelect.value = "";
+    signaturePresetName.value = "";
+    deleteSignaturePresetButton.disabled = true;
+    setSignatureStatus("");
     itemsContainer.replaceChildren();
     itemIndex = 0;
     (invoice.data.items || []).forEach((item) => addInvoiceItem(item));
@@ -519,10 +705,27 @@ deleteClientButton.addEventListener("click", async () => {
 const showInvoiceApp = async () => {
     authScreen.hidden = true;
     document.getElementById("main-container").hidden = false;
-    await Promise.all([loadSupplier(), loadClients(), loadInvoices(), loadPaymentPresets()]);
+    await Promise.all([loadSupplier(), loadClients(), loadInvoices(), loadPaymentPresets(), loadSignaturePresets(), loadNumberingSettings()]);
     showInvoiceScreen("list");
 };
 
+const loadNumberingSettings = async () => {
+    try {
+        const { settings } = await apiRequest("/api/settings");
+        invoiceStartingNumberInput.value = settings.invoiceStartingNumber;
+        invoiceStartingNumberInput.placeholder = String(settings.invoiceStartingNumber);
+    } catch {
+        // Keep the placeholder default if settings cannot be loaded.
+    }
+};
+
+const showNumberingSettingsPanel = (visible) => {
+    numberingSettingsPanel.hidden = !visible;
+    if (!visible) {
+        numberingSettingsStatus.textContent = "";
+    }
+};
+
 const showPasswordPanel = (visible) => {
     passwordPanel.hidden = !visible;
     if (!visible) {
@@ -575,6 +778,24 @@ logoutButton.addEventListener("click", async () => {
 passwordButton.addEventListener("click", () => showPasswordPanel(passwordPanel.hidden));
 cancelPasswordButton.addEventListener("click", () => showPasswordPanel(false));
 
+numberingSettingsButton.addEventListener("click", () => showNumberingSettingsPanel(numberingSettingsPanel.hidden));
+cancelNumberingSettingsButton.addEventListener("click", () => showNumberingSettingsPanel(false));
+
+saveNumberingSettingsButton.addEventListener("click", async () => {
+    numberingSettingsStatus.textContent = "";
+    const invoiceStartingNumber = Number.parseInt(invoiceStartingNumberInput.value, 10) || 1;
+    try {
+        const { settings } = await apiRequest("/api/settings", {
+            method: "PUT",
+            body: JSON.stringify({ invoiceStartingNumber })
+        });
+        invoiceStartingNumberInput.value = settings.invoiceStartingNumber;
+        numberingSettingsStatus.textContent = "Uloženo";
+    } catch (error) {
+        numberingSettingsStatus.textContent = error.message;
+    }
+});
+
 savePasswordButton.addEventListener("click", async () => {
     passwordStatus.textContent = "";
     try {
@@ -625,8 +846,6 @@ const formatCzechNumber = (value) => Number(value || 0).toLocaleString("cs-CZ",
     maximumFractionDigits: 2
 });
 
-const getTotalValue = () => Number.parseFloat(getValue("total").replace(",", ".")) || 0;
-
 const updateTotal = () => {
     const total = Array.from(itemsContainer.querySelectorAll(".invoice-item"))
         .reduce((sum, item) => {
@@ -638,153 +857,32 @@ const updateTotal = () => {
     document.getElementById("total").textContent = `${formatCzechNumber(total)} Kč`;
 };
 
-const getPersonName = (prefix) => [
-    getValue(`${prefix}Jmeno`),
-    getValue(`${prefix}Prijmeni`)
-].filter(Boolean).join(" ");
-
-const getAddress = (prefix) => [
-    getValue(`${prefix}UliceCp`),
-    [getValue(`${prefix}Psc`), getValue(`${prefix}Mesto`)].filter(Boolean).join(" ")
-].filter(Boolean).join(", ");
-
-const renderPerson = (prefix) => [
-    ((prefix === "odberatel" && getValue("odberatelTypSubjektu") === "spolecnost")
-        || (prefix === "dodavatel" && getValue("dodavatelTypSubjektu") === "spolecnost"))
-        ? getValue(`${prefix}NazevSpolecnosti`)
-        : getPersonName(prefix),
-    getValue(`${prefix}Ico`) ? `IČO: ${getValue(`${prefix}Ico`)}` : "",
-    getAddress(prefix)
-].filter(Boolean).map(escapeHtml).join("<br>");
-
-const renderItems = () => Array.from(itemsContainer.querySelectorAll(".invoice-item"))
-    .map((item) => {
-        const values = Array.from(item.querySelectorAll("input")).map((input) => input.value.trim());
-        return `<tr class="invoice-row">
-            <td>${escapeHtml(values[0])}</td>
-            <td>${escapeHtml(values[1] ? formatCzechNumber(values[1]) : "0,00")}</td>
-            <td>${escapeHtml(values[2])}</td>
-            <td>${escapeHtml(values[3] ? formatCzechNumber(values[3]) : "0,00")} Kč</td>
-        </tr>`;
-    }).join("");
-
-const normalizeIban = (value) => value.replace(/\s+/g, "").toUpperCase();
-
-const domesticAccountToIban = (accountNumber) => {
-    const match = accountNumber.replace(/\s+/g, "")
-        .match(/^(?:(\d{1,6})-)?(\d{1,10})\/(\d{4})$/);
-
-    if (!match) {
-        return "";
+printInvoiceButton.addEventListener("click", async () => {
+    try {
+        const response = await fetch("/api/invoices/pdf", {
+            method: "POST",
+            credentials: "same-origin",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                data: readInvoiceData(),
+                invoiceNumber: invoiceNumberDisplay.textContent
+            })
+        });
+        if (!response.ok) {
+            const data = await response.json();
+            throw new Error(data.error || "Generování faktury se nepodařilo.");
         }
 
-    const bban = `${match[3]}${(match[1] || "").padStart(6, "0")}${match[2].padStart(10, "0")}`;
-    const remainder = `${bban}123500`.split("").reduce(
-        (value, digit) => (value * 10 + Number(digit)) % 97,
-        0
-    );
-    const checkDigits = String(98 - remainder).padStart(2, "0");
-
-    return `CZ${checkDigits}${bban}`;
-};
-
-const buildPaymentQrPayload = (accountNumber, iban, swift, total, invoiceNumber = "") => {
-    const preferredAccount = normalizeIban(accountNumber);
-    const fallbackAccount = normalizeIban(iban);
-    const paymentAccount = /^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(preferredAccount)
-        ? preferredAccount
-        : domesticAccountToIban(accountNumber) || fallbackAccount;
-
-    if (!/^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(paymentAccount)) {
-        return "";
+        const blob = await response.blob();
+        const downloadUrl = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = downloadUrl;
+        link.download = `${invoiceNumberDisplay.textContent}.pdf`;
+        link.click();
+        URL.revokeObjectURL(downloadUrl);
+    } catch (error) {
+        window.alert(error.message);
     }
-
-    return [
-        "SPD*1.0",
-        `ACC:${paymentAccount}`,
-        `AM:${Number(total || 0).toFixed(2)}`,
-        "CC:CZK",
-        invoiceNumber && `X-VS:${invoiceNumber.replace(/\D/g, "").slice(-10)}`,
-        swift && `X-SWIFT:${normalizeIban(swift)}`
-    ].filter(Boolean).join("*");
-};
-
-const buildInvoiceHtml = () => {
-    const accountNumber = getValue("cisloUctu");
-    const iban = getValue("iban");
-    const swift = getValue("swift");
-    const qrPayload = buildPaymentQrPayload(
-        accountNumber,
-        iban,
-        swift,
-        Number.parseFloat(getValue("total").replace(",", ".")) || 0,
-        invoiceNumberDisplay.textContent
-    );
-    const qrMarkup = qrPayload
-        ? `<img class="qr-code" src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&amp;data=${encodeURIComponent(qrPayload)}" alt="QR kód platebních údajů">`
-        : "<p>Platební QR kód vyžaduje platný IBAN. Číslo účtu bez IBANu nelze bezpečně převést.</p>";
-    const paymentDetails = [
-        accountNumber && `Číslo účtu: ${accountNumber}`,
-        iban && `IBAN: ${iban}`,
-        swift && `SWIFT: ${swift}`
-    ].filter(Boolean).map(escapeHtml).join("<br>");
-
-    return `<!DOCTYPE html>
-<html lang="cs">
-<head>
-    <meta charset="UTF-8">
-    <title>Faktura</title>
-    <style>
-        @page { size: A4; margin: 18mm; }
-        * { box-sizing: border-box; }
-        body { color: #202124; font: 14px Arial, sans-serif; margin: 0; }
-        h1 { font-size: 30px; margin: 0 0 28px; }
-        h2 { font-size: 16px; margin: 0 0 8px; }
-        .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 28px; }
-        .party, .payment { border-top: 2px solid #202124; padding-top: 10px; }
-        table { border-collapse: separate; border-spacing: 0; margin-top: 24px; width: 100%; }
-        th, td { padding: 9px 6px; text-align: left; }
-        th { background: #f1f1f1; border-bottom: 1px solid #aeb8c0; }
-        .invoice-row td { border-bottom: 1px solid #c8c8c8; }
-        .invoice-row:nth-child(even) { background: #f4f7fb; }
-        .total { font-size: 18px; font-weight: bold; margin-top: 22px; text-align: right; }
-        .payment-row { align-items: start; display: flex; gap: 28px; justify-content: space-between; margin-top: 36px; }
-        .qr-code { height: 180px; width: 180px; }
-        .qr-placeholder { color: #666; max-width: 220px; }
-        @media print { .qr-placeholder { color: #202124; } }
-    </style>
-</head>
-<body>
-    <h1>Faktura ${escapeHtml(invoiceNumberDisplay.textContent)}</h1>
-    <div class="parties">
-        <section class="party"><h2>Dodavatel</h2>${renderPerson("dodavatel") || "Neuvedeno"}</section>
-        <section class="party"><h2>Odběratel</h2>${renderPerson("odberatel") || "Neuvedeno"}</section>
-    </div>
-    <table>
-        <thead><tr><th>Položka</th><th>Množství</th><th>MJ</th><th>Cena za MJ</th></tr></thead>
-        <tbody>${renderItems() || "<tr><td colspan=\"4\">Žádné položky</td></tr>"}</tbody>
-    </table>
-    <p class="total">Celková částka: ${formatCzechNumber(getTotalValue())} Kč</p>
-    <div class="payment-row">
-        <section class="payment"><h2>Platební údaje</h2>${paymentDetails || "Neuvedeno"}</section>
-        <div class="qr-placeholder">${qrMarkup}</div>
-    </div>
-</body>
-</html>`;
-};
-
-printInvoiceButton.addEventListener("click", () => {
-    const printWindow = window.open("about:blank", "_blank");
-
-    if (!printWindow) {
-        window.alert("Povolte prosím vyskakovací okna pro tisk faktury.");
-        return;
-    }
-
-    printWindow.document.open();
-    printWindow.document.write(buildInvoiceHtml());
-    printWindow.document.close();
-    printWindow.addEventListener("load", () => printWindow.print(), { once: true });
 });
 
 const addInvoiceItem = (values = {}) => {

app/src/static/style.css

@@ -595,6 +595,12 @@ body {
     outline-offset: 1px;
 }
 
+.field-hint {
+    margin: 0.35rem 0 0;
+    color: var(--muted-ink);
+    font-size: 0.8rem;
+}
+
 .form-group output {
     min-height: 1.5rem;
     padding: 0.25rem 0;
@@ -621,6 +627,122 @@ body {
     gap: 2rem;
 }
 
+.signature-row {
+    align-items: flex-start;
+}
+
+.signature-group {
+    width: 100%;
+    max-width: 420px;
+}
+
+.signature-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 120px;
+    padding: 1rem;
+    text-align: center;
+    color: var(--muted-ink);
+    background: #fff;
+    border: 2px dashed #c8d0d5;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.signature-dropzone:hover,
+.signature-dropzone:focus-visible {
+    border-color: var(--blue);
+    outline: none;
+}
+
+.signature-dropzone.is-dragover {
+    border-color: var(--blue);
+    background: rgba(43, 111, 143, 0.08);
+}
+
+.signature-dropzone-text {
+    margin: 0;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+.signature-preview {
+    display: block;
+    max-width: 100%;
+    max-height: 130px;
+    object-fit: contain;
+    border-radius: 0.25rem;
+}
+
+.signature-actions {
+    margin-top: 0.5rem;
+}
+
+.signature-save-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.signature-save-row input {
+    min-width: 0;
+    padding: 0.55rem 0.7rem;
+    color: var(--ink);
+    background: #fff;
+    border: 1px solid #c8d0d5;
+    border-radius: 0.25rem;
+    font: inherit;
+}
+
+.signature-save-row button {
+    padding: 0.55rem 0.7rem;
+    color: var(--navy);
+    background: transparent;
+    border: 1px solid var(--blue);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.85rem;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.signature-save-row button:hover:not(:disabled) {
+    color: #fff;
+    background: var(--blue);
+}
+
+.signature-save-row .secondary-button {
+    color: #8c3c36;
+    border-color: #c47a72;
+}
+
+.signature-save-row .secondary-button:hover:not(:disabled) {
+    color: #fff;
+    background: #a53c36;
+}
+
+.signature-save-row button:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.signature-status {
+    margin: 0.4rem 0 0;
+    min-height: 1.1rem;
+    color: var(--muted-ink);
+    font-size: 0.8rem;
+}
+
+.signature-status.is-error {
+    color: #b3261e;
+}
+
 .total-amount-group {
     grid-column: 1 / -1;
     margin: 0;
@@ -891,6 +1013,10 @@ select:focus {
         grid-template-columns: 1fr;
     }
 
+    .signature-save-row {
+        grid-template-columns: 1fr;
+    }
+
     .delete-item-button {
         justify-self: end;
     }

app/test/app.test.js

@@ -1,4 +1,4 @@
-const { normalizeInvoiceData } = require('../src/invoice-data');
+const { isValidSignatureDataUrl, normalizeInvoiceData } = require('../src/invoice-data');
 
 describe('normalizeInvoiceData', () => {
     test('calculates the total from validated line items', () => {
@@ -30,4 +30,29 @@ describe('normalizeInvoiceData', () => {
             { mnozstvi: 'not-a-number', cenaZaMj: 10 }
         ] })).toBeNull();
     });
+
+    test('accepts a valid signature data URL and rejects invalid ones', () => {
+        const withValidSignature = normalizeInvoiceData({
+            items: [{ mnozstvi: 1, cenaZaMj: 10 }],
+            signature: 'data:image/png;base64,aGVsbG8='
+        });
+        expect(withValidSignature.signature).toBe('data:image/png;base64,aGVsbG8=');
+
+        const withInvalidSignature = normalizeInvoiceData({
+            items: [{ mnozstvi: 1, cenaZaMj: 10 }],
+            signature: 'not-a-data-url'
+        });
+        expect(withInvalidSignature.signature).toBeNull();
+
+        const withoutSignature = normalizeInvoiceData({
+            items: [{ mnozstvi: 1, cenaZaMj: 10 }]
+        });
+        expect(withoutSignature.signature).toBeNull();
+    });
+
+    test('validates only supported base64 signature image data URLs', () => {
+        expect(isValidSignatureDataUrl('data:image/jpeg;base64,aGVsbG8=')).toBe(true);
+        expect(isValidSignatureDataUrl('data:image/gif;base64,aGVsbG8=')).toBe(false);
+        expect(isValidSignatureDataUrl('data:image/png;base64,not valid')).toBe(false);
+    });
 });