Report template

2022-11-10 08:57:42 +01:00 · 2022-11-10 08:57:42 +01:00 · b8add5b0bc
parent 89e49c3843
commit b8add5b0bc
35 changed files with 1608 additions and 1868 deletions
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -4,6 +4,7 @@ parserOptions:
    sourceType: "module"
 plugins:
    - jasmine
+    - html
 env:
    jasmine: true
 rules:
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,7 +2,10 @@
 {
    // Carácter predeterminado de final de línea.
    "files.eol": "\n",
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    }
+    "editor.bracketPairColorization.enabled": true,
+    "editor.guides.bracketPairs": true,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+    "eslint.validate": ["javascript", "html"]
 }
--- a/package.json
+++ b/package.json
@ -63,6 +63,7 @@
        "del": "^2.2.2",
        "eslint": "^7.11.0",
        "eslint-config-google": "^0.11.0",
+        "eslint-plugin-html": "^7.1.0",
        "eslint-plugin-jasmine": "^2.10.1",
        "fancy-log": "^1.3.2",
        "file-loader": "^1.1.11",
--- a/print/templates/reports/credit-request/credit-request.html
+++ b/print/templates/reports/credit-request/credit-request.html
@ -1,21 +1,10 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-
-                        <!-- Block -->
    <div class="grid-row info-panel">
        <div class="grid-block">
            <h1 class="title centered uppercase">{{$t('fields.title')}}</h1>
        </div>
    </div>
-
-                        <!-- Block -->
    <table>
        <tbody>
            <tr>
@ -28,8 +17,6 @@
            </tr>
        </tbody>
    </table>
-
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="info-panel">
@ -109,8 +96,6 @@
            </div>
        </div>
    </div>
-
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="info-panel" style="width: 98%">
@ -150,8 +135,6 @@
            </div>
        </div>
    </div>
-
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div>
@ -176,15 +159,9 @@
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
    <report-footer
        id="pageFooter"
        v-bind:left-text="dated"
        v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/credit-request/credit-request.js
+++ b/print/templates/reports/credit-request/credit-request.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -12,6 +13,7 @@ const rptCreditRequest = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    }
--- a/print/templates/reports/driver-route/driver-route.html
+++ b/print/templates/reports/driver-route/driver-route.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-<body>
-    <table class="grid">
-        <tbody>
-            <tr>
-                <td>
-                    <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                    <!-- Block -->
    <div class="grid-row route-block" v-for="route in routes">
        <div class="grid-block">
            <h1 class="title uppercase">{{$t('route')}} {{route.id}}</h1>
@ -80,7 +72,6 @@
                    </div>
                </div>
            </div>
-                            <!-- Route ticket list -->
            <div v-if="route.tickets" v-for="ticket in route.tickets" class="no-page-break">
                <div>
                    <table class="column-oriented repeatable">
@ -148,14 +139,8 @@
            </div>
        </div>
    </div>
-                    <!-- Footer block -->
    <report-footer id="pageFooter" 
        v-bind:left-text="$t('routeId', [id])" 
        v-bind="$props">
    </report-footer>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</body>
-</html>
+</report-body>
--- a/print/templates/reports/driver-route/driver-route.js
+++ b/print/templates/reports/driver-route/driver-route.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -39,6 +40,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/entry-order/entry-order.html
+++ b/print/templates/reports/entry-order/entry-order.html
@ -1,15 +1,6 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"
-                            v-bind:company-code="entry.companyCode">
+<report-body>
+    <report-header v-bind="$props" v-bind:company-code="entry.companyCode">
    </report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns">
@ -52,8 +43,6 @@
                    </div>
                </div>
            </div>
-                
-                                <!-- Buy block -->
            <table class="column-oriented vn-mt-ml">
                <thead>
                    <tr>
@ -72,7 +61,8 @@
                        <td width="50%">{{buy.itemName}}</td>
                        <td width="10%" class="number">{{buy.quantity | number($i18n.locale)}}</td>
                        <td width="15%" class="number">{{buy.buyingValue | currency('EUR', $i18n.locale)}}</td>
-                                            <td width="15%" class="number">{{buy.buyingValue * buy.quantity | currency('EUR', $i18n.locale)}}</td>
+                        <td width="15%" class="number">{{buy.buyingValue * buy.quantity | currency('EUR',
+                            $i18n.locale)}}</td>
                    </tr>
                    <tr class="description font light-gray">
                        <td colspan="7">
@ -97,7 +87,6 @@
                    </tr>
                </tfoot>
            </table>
-                                <!-- End of buy block -->
            <div class="columns">
                <div class="size50">
                    <div id="notes" class="panel no-page-break" v-if="entry.notes">
@ -112,16 +101,7 @@
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('entry', [entry.id])"
-                            v-bind:company-code="entry.companyCode"
-                            v-bind:center-text="supplier.name"
-                            v-bind:="$props">
+    <report-footer id="pageFooter" v-bind:left-text="$t('entry', [entry.id])" v-bind:company-code="entry.companyCode"
+        v-bind:center-text="supplier.name" v-bind:="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/entry-order/entry-order.js
+++ b/print/templates/reports/entry-order/entry-order.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -35,6 +36,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/exportation/exportation.html
+++ b/print/templates/reports/exportation/exportation.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <h1 class="title centered uppercase">{{$t('title')}}</h1>
@ -38,14 +30,6 @@
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('invoice', [invoice.ref])"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:left-text="$t('invoice', [invoice.ref])" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/exportation/exportation.js
+++ b/print/templates/reports/exportation/exportation.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -25,6 +26,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/extra-community/extra-community.html
+++ b/print/templates/reports/extra-community/extra-community.html
@ -1,19 +1,10 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
    <div class="grid-row">
        <div class="grid-block">
            <h1 class="title uppercase">{{$t('title')}}</h1>
        </div>
    </div>
-
-                        <!-- Block -->
    <div class="grid-row vn-mb-lg" v-for="travel in travels">
        <div class="grid-block">
            <div class="panel">
@ -71,14 +62,6 @@
            </table>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="dated"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:left-text="dated" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/extra-community/extra-community.js
+++ b/print/templates/reports/extra-community/extra-community.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');
 const db = require(`vn-print/core/database`);
@ -100,6 +101,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/incoterms-authorization/incoterms-authorization.html
+++ b/print/templates/reports/incoterms-authorization/incoterms-authorization.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <p v-html="$t('description', {
@ -20,9 +12,7 @@
            <p v-html="$t('declaration', {
                socialName: client.socialName
            })"></p>
-                                <p 
-                                    v-for="(declaration, $index) in $t('declarations')" 
-                                    v-html="$t('declarations[' + $index + ']', {
+            <p v-for="(declaration, $index) in $t('declarations')" v-html="$t('declarations[' + $index + ']', {
                    companyName: company.name,
                    companyCity: company.city,
                    socialName: client.socialName,
@ -59,26 +49,11 @@
                    <p>
                    <div>{{company.manager}}</div>
                    <div>{{$t('manager')}}</div>
-                                            <p>{{$t('issued', [
-                                                    company.city, 
-                                                    issued.getDate(), 
-                                                    $t('months')[issued.getMonth()], 
-                                                    issued.getFullYear()])
-                                                }}
-                                            </p>
                    </p>
                </div>
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('client', [client.id])"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:left-text="$t('client', [client.id])" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/incoterms-authorization/incoterms-authorization.js
+++ b/print/templates/reports/incoterms-authorization/incoterms-authorization.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -16,6 +17,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/invoice-incoterms/invoice-incoterms.html
+++ b/print/templates/reports/invoice-incoterms/invoice-incoterms.html
@ -1,15 +1,6 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid no-page-break page-break-after">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"
-                            v-bind:company-code="invoice.companyCode">
+<report-body>
+    <report-header v-bind="$props" v-bind:company-code="invoice.companyCode">
    </report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns vn-mb-lg">
@ -115,9 +106,4 @@
            </div>
        </div>
    </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/invoice-incoterms/invoice-incoterms.js
+++ b/print/templates/reports/invoice-incoterms/invoice-incoterms.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -27,6 +28,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/invoice/invoice.html
+++ b/print/templates/reports/invoice/invoice.html
@ -1,22 +1,8 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-
-                        <!-- Incoterms block -->
-                        <invoice-incoterms 
-                            v-if="hasIncoterms"
-                            v-bind="$props">
+<report-body>
+    <invoice-incoterms v-if="hasIncoterms" v-bind="$props">
    </invoice-incoterms>
-
-                        <!-- Header block -->
-                        <report-header v-bind="$props"
-                            v-bind:company-code="invoice.companyCode">
+    <report-header v-bind="$props" v-bind:company-code="invoice.companyCode">
    </report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns vn-mb-lg">
@ -59,8 +45,6 @@
                    </div>
                </div>
            </div>
-
-                                <!-- Rectified invoices block -->
            <div class="size100 no-page-break" v-if="rectified.length > 0">
                <h2>{{$t('rectifiedInvoices')}}</h2>
                <table class="column-oriented">
@ -82,9 +66,6 @@
                    </tbody>
                </table>
            </div>
-                                <!-- End of rectified invoices block -->
-                
-                                <!-- Sales block -->
            <div class="vn-mt-lg" v-for="ticket in tickets">
                <div class="table-title clearfix">
                    <div class="pull-left">
@ -153,10 +134,8 @@
                    </tfoot>
                </table>
            </div>
-                                <!-- End of sales block -->

            <div class="columns vn-mt-xl">
-                                    <!-- Taxes block -->
                <div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
                    <table class="column-oriented">
                        <thead>
@ -207,9 +186,6 @@
                        </div>
                    </div>
                </div>
-                                    <!-- End of taxes block -->
-
-                                    <!-- Phytosanitary block -->
                <div id="phytosanitary" class="size50 pull-left no-page-break">
                    <div class="panel">
                        <div class="body">
@ -244,11 +220,7 @@
                        </div>
                    </div>
                </div>
-                                    <!-- End of phytosanitary block -->
            </div>
-
-                                
-                                <!-- Intrastat block -->
            <div class="size100 no-page-break" v-if="intrastat.length > 0">
                <h2>{{$t('intrastat')}}</h2>
                <table class="column-oriented">
@ -286,9 +258,6 @@
                    </tfoot>
                </table>
            </div>
-                                <!-- End of intrastat block -->
-
-                                <!-- Observations block -->
            <div class="columns vn-mt-xl" v-if="invoice.payMethodCode == 'wireTransfer'">
                <div class="size50 pull-left no-page-break">
                    <div class="panel">
@ -300,20 +269,9 @@
                    </div>
                </div>
            </div>
-                                <!-- End of observations block -->
-
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:company-code="invoice.companyCode"
-                            v-bind:left-text="$t('invoiceRef', [invoice.ref])"
-                            v-bind:center-text="client.socialName"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:company-code="invoice.companyCode"
+        v-bind:left-text="$t('invoiceRef', [invoice.ref])" v-bind:center-text="client.socialName" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/invoice/invoice.js
+++ b/print/templates/reports/invoice/invoice.js
@ -1,5 +1,6 @@
 const Component = require(`vn-print/core/component`);
 const Report = require(`vn-print/core/report`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');
 const invoiceIncoterms = new Report('invoice-incoterms');
@ -110,6 +111,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build(),
        'invoice-incoterms': invoiceIncoterms.build()
--- a/print/templates/reports/invoiceIn/invoiceIn.html
+++ b/print/templates/reports/invoiceIn/invoiceIn.html
@ -1,16 +1,6 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-
-                        <!-- Header block -->
-                        <report-header v-bind="$props"
-                            v-bind:company-code="invoice.companyCode">
+<report-body>
+    <report-header v-bind="$props" v-bind:company-code="invoice.companyCode">
    </report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns vn-mb-lg">
@ -126,10 +116,7 @@
                    </tfoot>
                </table>
            </div>
-                                <!-- End of sales block -->
-
            <div class="columns vn-mt-xl">
-                                    <!-- Taxes block -->
                <div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
                    <table class="column-oriented">
                        <thead>
@ -180,9 +167,6 @@
                        </div>
                    </div>
                </div>
-                                    <!-- End of taxes block -->
-
-                                <!-- Observations block -->
                <div class="columns vn-mt-xl">
                    <div class="size50 pull-left no-page-break">
                        <div class="panel">
@ -194,21 +178,10 @@
                        </div>
                    </div>
                </div>
-                                <!-- End of observations block -->
-
            </div>
        </div>
    </div>
-                    <!-- Footer block -->
-                    <report-footer id="pageFooter"
-                        v-bind:company-code="invoice.companyCode"
-                        v-bind:left-text="$t('invoiceId')"
-                        v-bind:center-text="invoice.name"
-                        v-bind="$props">
+    <report-footer id="pageFooter" v-bind:company-code="invoice.companyCode" v-bind:left-text="$t('invoiceId')"
+        v-bind:center-text="invoice.name" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/invoiceIn/invoiceIn.js
+++ b/print/templates/reports/invoiceIn/invoiceIn.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -82,6 +83,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build(),
    },
--- a/print/templates/reports/item-label/item-label.html
+++ b/print/templates/reports/item-label/item-label.html
@ -1,10 +1,4 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
+<report-body>
    <div class="label">
        <div class="barcode">
            <h1>{{item.id}}</h1>
@ -26,10 +20,4 @@
            </div>
        </div>
    </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
-
+</report-body>
--- a/print/templates/reports/item-label/item-label.js
+++ b/print/templates/reports/item-label/item-label.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');
 const qrcode = require('qrcode');
@ -50,6 +51,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/letter-debtor/letter-debtor.html
+++ b/print/templates/reports/letter-debtor/letter-debtor.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns">
@ -81,15 +73,7 @@
            </table>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('client', [client.id])"
-                            v-bind:center-text="client.socialName"
+    <report-footer id="pageFooter" v-bind:left-text="$t('client', [client.id])" v-bind:center-text="client.socialName"
        v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/letter-debtor/letter-debtor.js
+++ b/print/templates/reports/letter-debtor/letter-debtor.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -58,6 +59,7 @@ module.exports = {
        },
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/receipt/receipt.html
+++ b/print/templates/reports/receipt/receipt.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="content">
@ -31,15 +23,7 @@
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('client', [client.id])"
-                            v-bind:center-text="client.socialName"
+    <report-footer id="pageFooter" v-bind:left-text="$t('client', [client.id])" v-bind:center-text="client.socialName"
        v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/receipt/receipt.js
+++ b/print/templates/reports/receipt/receipt.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -20,6 +21,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/sepa-core/sepa-core.html
+++ b/print/templates/reports/sepa-core/sepa-core.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row no-page-break page-break-after">
        <div class="grid-block">
            <div class="content">
@ -25,9 +17,7 @@
        </div>
    </div>

-                        <!-- Header block -->
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <h1 class="title centered">{{$t('title')}}</h1>
@ -187,15 +177,7 @@
            <p class="font small">{{$t('sendOrder')}}</p>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('order', [supplier.mandateCode])"
-                            v-bind:center-text="client.socialName"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:left-text="$t('order', [supplier.mandateCode])"
+        v-bind:center-text="client.socialName" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/sepa-core/sepa-core.js
+++ b/print/templates/reports/sepa-core/sepa-core.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -35,6 +36,7 @@ const rptSepaCore = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/supplier-campaign-metrics/supplier-campaign-metrics.html
+++ b/print/templates/reports/supplier-campaign-metrics/supplier-campaign-metrics.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="columns">
@ -91,15 +83,7 @@
            </div>
        </div>
    </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('supplier', [supplier.id])"
-                            v-bind:center-text="supplier.supplierName"
-                            v-bind="$props">
+    <report-footer id="pageFooter" v-bind:left-text="$t('supplier', [supplier.id])"
+        v-bind:center-text="supplier.supplierName" v-bind="$props">
    </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/supplier-campaign-metrics/supplier-campaign-metrics.js
+++ b/print/templates/reports/supplier-campaign-metrics/supplier-campaign-metrics.js
@ -1,4 +1,5 @@
 const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -44,6 +45,7 @@ module.exports = {
        }
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/vehicle-event-expired/vehicle-event-expired.html
+++ b/print/templates/reports/vehicle-event-expired/vehicle-event-expired.html
@ -1,13 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
+<report-body>
    <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
    <div class="grid-row">
        <div class="grid-block">
            <div class="content">
@ -31,9 +23,4 @@
            </table>
        </div>
    </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/vehicle-event-expired/vehicle-event-expired.js
+++ b/print/templates/reports/vehicle-event-expired/vehicle-event-expired.js
@ -1,4 +1,5 @@
 const Component = require(`${appPath}/core/component`);
+const reportBody = new Component('report-body');
 const reportHeader = new Component('report-header');
 const reportFooter = new Component('report-footer');

@ -16,6 +17,7 @@ module.exports = {
        },
    },
    components: {
+        'report-body': reportBody.build(),
        'report-header': reportHeader.build(),
        'report-footer': reportFooter.build()
    },
--- a/print/templates/reports/zone/zone.html
+++ b/print/templates/reports/zone/zone.html
@ -1,16 +1,5 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
+<report-body>
    <div class="text">{{zone.agencyName}}</div>
    <div class="text">{{zone.id}}</div>
    <div class="text">{{zone.plateNumber}} {{zone.time | date('%H:%M')}}</div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+</report-body>
--- a/print/templates/reports/zone/zone.js
+++ b/print/templates/reports/zone/zone.js
@ -1,3 +1,6 @@
+const Component = require(`${appPath}/core/component`);
+const reportBody = new Component('report-body');
+
 module.exports = {
    name: 'zone',
    async serverPrefetch() {
@ -11,6 +14,9 @@ module.exports = {
            return this.findOneFromDef('zone', [id]);
        }
    },
+    components: {
+        'report-body': reportBody.build()
+    },
    props: {
        id: {
            type: Number,