Merge pull request #4051 from beganovich/v2-design-improvements

Design improvements

app/Http/Controllers/PreviewController.php

@@ -173,14 +173,7 @@ class PreviewController extends BaseController
 
         $html = new HtmlEngine(null, $invoice->invitations()->first(), 'invoice');
 
-        if (isset(request()->design['name'])) {
+        $design = new Design(Design::CUSTOM, ['custom_partials' => request()->design['design']]);
-            $design = new Design(strtolower(request()->design['name']));
-        } else {
-            $design = new Design(Design::CUSTOM, ['custom_partials' => request()->design['design']]);
-        }
-
-        // $designer = new Designer($entity_obj, $design_object, $entity_obj->client->getSetting('pdf_variables'), lcfirst($entity));
-        // $html = $this->generateEntityHtml($designer, $entity_obj);
 
         $state = [
             'template' => $design->elements([

app/Services/PdfMaker/Design.php

@@ -67,7 +67,7 @@ class Design extends BaseDesign
             : config('ninja.designs.base_path');
 
         return file_get_contents(
-            $path.$this->design
+            $path . $this->design
         );
     }
 
@@ -164,7 +164,7 @@ class Design extends BaseDesign
 
         foreach ($variables as $variable) {
             $elements[] = ['element' => 'tr', 'properties' => ['hidden' => $this->entityVariableCheck($variable)], 'elements' => [
-                ['element' => 'th', 'content' => $variable.'_label'],
+                ['element' => 'th', 'content' => $variable . '_label'],
                 ['element' => 'th', 'content' => $variable],
             ]];
         }
@@ -187,7 +187,7 @@ class Design extends BaseDesign
         $elements = [];
 
         foreach ($this->context['pdf_variables']["{$this->type}_columns"] as $column) {
-            $elements[] = ['element' => 'th', 'content' => $column.'_label'];
+            $elements[] = ['element' => 'th', 'content' => $column . '_label'];
         }
 
         return $elements;
@@ -226,6 +226,22 @@ class Design extends BaseDesign
             ]],
         ];
 
+        foreach (['discount', 'custom_surcharge1', 'custom_surcharge2', 'custom_surcharge3', 'custom_surcharge4'] as $property) {
+            $variable = sprintf('%s%s', '$', $property);
+
+            if (
+                !is_null($this->entity->{$property}) ||
+                !empty($this->entity->{$property}) ||
+                $this->entity->{$property} !== 0
+            ) {
+                continue;
+            }
+
+            $variables = array_filter($variables, function ($m) use ($variable) {
+                return $m != $variable;
+            });
+        }
+
         foreach ($variables as $variable) {
             if ($variable == '$total_taxes' || $variable == '$line_taxes') {
                 continue;
@@ -233,7 +249,7 @@ class Design extends BaseDesign
 
             $elements[] = ['element' => 'div', 'elements' => [
                 ['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
-                ['element' => 'span', 'content' => $variable.'_label'],
+                ['element' => 'span', 'content' => $variable . '_label'],
                 ['element' => 'span', 'content' => $variable],
             ]];
         }

app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php

@@ -79,7 +79,9 @@ trait DesignHelpers
                 $document->importNode($element, true)
             );
 
-            return $document->saveXML();
+            $html = $document->saveHTML();
+
+            return str_replace('%24', '$', $html);
         }
 
         return '';

app/Services/PdfMaker/PdfMaker.php

@@ -71,14 +71,8 @@ class PdfMaker
 
     public function getCompiledHTML($final = false)
     {
-        if ($final) {
+        $html =  $this->document->saveHTML();
-            $html = $this->document->saveXML();
     
-            $filtered = strtr($html, $this->filters);
+        return str_replace('%24', '$', $html);
-
-            return $filtered;
-        }
-
-        return $this->document->saveXML();
     }
 }

app/Utils/HtmlEngine.php

@@ -104,6 +104,7 @@ class HtmlEngine
         //$data['$invoice_date']           = ['value' => $this->date ?: ' ', 'label' => ctrans('texts.invoice_date')];
         $data['$invoice.date'] = &$data['$date'];
         $data['$due_date'] = ['value' => $this->entity->due_date ?: ' ', 'label' => ctrans('texts.'.$this->entity_string.'_due_date')];
+        $data['$payment_due'] = ['value' => $this->entity->due_date ?: ' ', 'label' => ctrans('texts.payment_due')];
         $data['$invoice.due_date'] = &$data['$due_date'];
         $data['$invoice.number'] = ['value' => $this->entity->number ?: ' ', 'label' => ctrans('texts.invoice_number')];
         $data['$invoice.po_number'] = ['value' => $this->entity->po_number ?: ' ', 'label' => ctrans('texts.po_number')];
@@ -154,6 +155,7 @@ class HtmlEngine
         $data['$partial_due'] = ['value' => Number::formatMoney($this->entity->partial, $this->client) ?: ' ', 'label' => ctrans('texts.partial_due')];
         $data['$total'] = ['value' => Number::formatMoney($this->entity_calc->getTotal(), $this->client) ?: ' ', 'label' => ctrans('texts.total')];
         $data['$amount'] = &$data['$total'];
+        $data['$amount_due'] = ['value' => &$data['$total']['value'], 'label' => ctrans('texts.amount_due')];
         $data['$quote.total'] = &$data['$total'];
         $data['$invoice.total'] = ['value' => Number::formatMoney($this->entity_calc->getTotal(), $this->client) ?: ' ', 'label' => ctrans('texts.invoice_total')];
         $data['$invoice.amount'] = &$data['$total'];
@@ -275,10 +277,10 @@ class HtmlEngine
         $data['$company3'] = ['value' => $this->settings->custom_value3 ?: ' ', 'label' => $this->makeCustomField('company3')];
         $data['$company4'] = ['value' => $this->settings->custom_value4 ?: ' ', 'label' => $this->makeCustomField('company4')];
 
-        $data['$custom_surcharge1'] = ['value' => $this->entity->custom_surcharge1, 'label' => $this->makeCustomField('custom_surcharge1')];
+        $data['$custom_surcharge1'] = ['value' => $this->entity->custom_surcharge1 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge1')];
-        $data['$custom_surcharge2'] = ['value' => $this->entity->custom_surcharge2, 'label' => $this->makeCustomField('custom_surcharge2')];
+        $data['$custom_surcharge2'] = ['value' => $this->entity->custom_surcharge2 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge2')];
-        $data['$custom_surcharge3'] = ['value' => $this->entity->custom_surcharge3, 'label' => $this->makeCustomField('custom_surcharge3')];
+        $data['$custom_surcharge3'] = ['value' => $this->entity->custom_surcharge3 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge3')];
-        $data['$custom_surcharge4'] = ['value' => $this->entity->custom_surcharge4, 'label' => $this->makeCustomField('custom_surcharge4')];
+        $data['$custom_surcharge4'] = ['value' => $this->entity->custom_surcharge4 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge4')];
 
         $data['$product.date'] = ['value' => '', 'label' => ctrans('texts.date')];
         $data['$product.discount'] = ['value' => '', 'label' => ctrans('texts.discount')];
@@ -313,6 +315,8 @@ class HtmlEngine
         $data['_rate2'] = ['value' => '', 'label' => ctrans('texts.tax')];
         $data['_rate3'] = ['value' => '', 'label' => ctrans('texts.tax')];
 
+        $data['$font-size'] = ['value' => $this->settings->font_size . 'px', 'label' => ''];
+
         // $data['custom_label1']              = ['value' => '', 'label' => ctrans('texts.')];
         // $data['custom_label2']              = ['value' => '', 'label' => ctrans('texts.')];
         // $data['custom_label3']              = ['value' => '', 'label' => ctrans('texts.')];

resources/lang/en/texts.php

@@ -3266,4 +3266,6 @@ return [
     'add_payment_method_first' => 'add payment method',
 
     'no_items_selected' => 'No items selected.',
+
+    'payment_due' => 'Payment due',
 ];

resources/views/pdf-designs/bold.html

@@ -3,144 +3,147 @@
     <head id="head">
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: '$font-size';
+            }
+
+            @page {
+                margin: 1cm;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin-top: 0;
+                    margin-right: 0;
+                }
+            }
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1.5fr 1fr 1fr;
+                background-color: #2d2c2a;
+                padding: 3rem;
+                color: white;
+            }
+
+            .company-logo {
+                height: 6rem;
+                padding: 2rem;
+                background-color: white;
+                margin: 2rem;
+                margin-top: -4rem;
+            }
+
+            #company-details,
+            #company-address {
+                display: flex;
+                flex-direction: column;
+            }
+
+            #client-details {
+                margin: 2rem;
+                display: flex;
+                flex-direction: column;
+            }
+            #client-details > :first-child {
+                font-weight: bold;
+            }
+
+            .client-entity-wrapper {
+                display: grid;
+                grid-template-columns: 1.5fr 1fr;
+            }
+
+            .entity-details-wrapper {
+                background-color: #35a39a;
+                padding: 1rem;
+            }
+
+            #entity-details {
+                width: 100%;
+                text-align: left;
+                color: white !important;
+            }
+            #entity-details > tr,
+            #entity-details th {
+                font-weight: normal;
+                padding-bottom: 0.5rem;
+            }
+
+            #product-table {
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+                margin-top: 3rem;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                padding: 2rem;
+                font-size: 1.5rem;
+            }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
+            #product-table > tbody > tr > td {
+                padding: 1.5rem;
+            }
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
+            }
+            #product-table > tbody > tr > td:first-child {
+                font-weight: bold;
+            }
+            #product-table > tbody > tr:nth-child(odd) {
+                background-color: #ebebeb;
+            }
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1.2rem;
+                padding-left: 1.2rem;
+                gap: 20px;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due-label'],
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                font-weight: bold;
+                font-size: 1.4rem;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #35a39a;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1.5rem;
+            }
+        </style>
     </head>
 
-    <style id="style">
+    <div class="header-wrapper" id="header">
-        * {
+        <div><!-- Empty space placeholder--></div>
-            margin: 0;
-            padding: 0;
-            font-size: 14px;
-        }
 
-        @page {
+        <div id="company-details"></div>
-            margin-top: 1cm;
+        <div id="company-address"></div>
-            margin-bottom: 1cm;
+    </div>
-        }
-
-        body {
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            font-family: Arial, Helvetica, sans-serif;
-        }
-
-        @media print {
-            body {
-                margin-top: 0;
-                margin-right: 0;
-            }
-        }
-        .header-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr 1fr;
-            background-color: #2d2c2a;
-            padding: 3rem;
-            color: white;
-        }
-
-        .company-logo {
-            height: 6rem;
-            padding: 2rem;
-            background-color: white;
-            margin: 2rem;
-            margin-top: -4rem;
-        }
-
-        #company-details,
-        #company-address {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #client-details {
-            margin: 2rem;
-            display: flex;
-            flex-direction: column;
-        }
-        #client-details > :first-child {
-            font-weight: bold;
-        }
-
-        .client-entity-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr;
-        }
-
-        .entity-details-wrapper {
-            background-color: #35a39a;
-            padding: 1rem;
-        }
-
-        #entity-details {
-            width: 100%;
-            text-align: left;
-            color: white !important;
-        }
-        #entity-details > tr,
-        #entity-details th {
-            font-weight: normal;
-            padding-bottom: 0.5rem;
-        }
-
-        #product-table {
-            min-width: 100%;
-            table-layout: fixed;
-            overflow-wrap: break-word;
-            margin-top: 3rem;
-        }
-        #product-table > thead {
-            text-align: left;
-        }
-        #product-table > thead > tr > th {
-            padding: 2rem;
-            font-size: 1.5rem;
-        }
-        #product-table > thead > tr > th:last-child {
-            text-align: right;
-        }
-        #product-table > tbody > tr > td {
-            padding: 1.5rem;
-        }
-        #product-table > tbody > tr > td:last-child {
-            text-align: right;
-        }
-        #product-table > tbody > tr > td:first-child {
-            font-weight: bold;
-        }
-        #product-table > tbody > tr:nth-child(odd) {
-            background-color: #ebebeb;
-        }
-
-        #product-table-footer > * {
-            display: grid;
-            grid-template-columns: 3fr 1fr 1fr;
-            padding-top: 1.2rem;
-            padding-left: 1.2rem;
-            gap: 20px;
-        }
-        #product-table-footer
-            > *
-            [data-element='product-table-balance-due-label'],
-        #product-table-footer > * [data-element='product-table-balance-due'] {
-            font-weight: bold;
-            font-size: 1.4rem;
-        }
-        #product-table-footer > * [data-element='product-table-balance-due'] {
-            color: #35a39a;
-        }
-        #product-table-footer > * > :last-child {
-            text-align: right;
-            padding-right: 1.5rem;
-        }
-    </style>
 
     <body id="body">
-        <div class="header-wrapper" id="header">
-            <div><!-- Empty space placeholder--></div>
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-
         <img
             class="company-logo"
             src="$company.logo"
@@ -158,7 +161,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/business.html

@@ -6,23 +6,14 @@
 
         <style id="style">
             body {
-                margin: 2rem;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
                 font-family: Arial, Helvetica, sans-serif;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
             }
 
             .header-container {
@@ -172,8 +163,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-container" id="header">
+        <div class="header-container">
             <img
                 src="$company.logo"
                 class="company-logo"
@@ -196,7 +189,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/clean.html

@@ -7,23 +7,16 @@
 
         <style id="style">
             body {
-                margin: 2rem;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
                 font-family: Arial, Helvetica, sans-serif;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
             }
 
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
             .header-container {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -134,8 +127,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-container" id="header">
+        <div class="header-container">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -157,7 +152,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/creative.html

@@ -6,9 +6,7 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
             }
 
             @page {
@@ -128,8 +126,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <div id="client-details"></div>
 
             <div class="company-info-wrapper">
@@ -156,7 +156,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/elegant.html

@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .company-logo-wrapper {
                 display: flex;
                 flex-direction: row;
@@ -147,8 +134,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="company-logo-wrapper" id="header">
+        <div class="company-logo-wrapper">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -181,10 +170,10 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer">
-            <p class="thanks-label">$thanks_label!</p>
-            <hr class="double-border" />
-        </footer>
     </body>
+    
+    <footer id="footer">
+        <p class="thanks-label">$thanks_label!</p>
+        <hr class="double-border" />
+    </footer>
 </html>

resources/views/pdf-designs/hipster.html

@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1.2fr 1.8fr;
@@ -151,8 +138,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <div class="header-left-side-wrapper">
                 <p class="header-text-label">$from_label:</p>
 
@@ -185,8 +174,8 @@
                 <span class="entity-property-value">$entity_number</span>
             </span>
             <span>
-                <span class="entity-property-label">$entity_date_label:</span>
+                <span class="entity-property-label">$date_label:</span>
-                <span class="entity-property-value">$entity_date</span>
+                <span class="entity-property-value">$date</span>
             </span>
             <span>
                 <span class="entity-property-label">$payment_due_label:</span>
@@ -205,7 +194,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/modern.html

@@ -6,14 +6,7 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
-            }
-
-            @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
             }
 
             body {
@@ -22,12 +15,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
             .header-container {
                 background-color: #f46521;
                 color: white;
@@ -100,8 +87,6 @@
 
             .footer-wrapper {
                 display: grid;
-                position: fixed;
-                bottom: 0;
                 width: 100%;
                 padding: 1.5rem;
                 grid-template-columns: 2fr 1fr 1fr;
@@ -151,13 +136,13 @@
         </style>
     </head>
 
+    <div class="header-container" id="header">
+        <h1 class="company-name">$company.name</h1>
+
+        <table id="entity-details" cellspacing="0"></table>
+    </div>
+
     <body id="body">
-        <div class="header-container" id="header">
-            <h1 class="company-name">$company.name</h1>
-
-            <table id="entity-details" cellspacing="0"></table>
-        </div>
-
         <div class="logo-client-wrapper">
             <img
                 class="company-logo"
@@ -173,16 +158,14 @@
 
             <div id="product-table-footer" cellspacing="0"></div>
         </div>
+    </body>
 
-        <div class="footer-wrapper">
+    <div class="footer-wrapper" id="footer">
-            <div>
+        <div>
-                <!-- Placeholder for offset -->
+            <!-- Placeholder for offset -->
-            </div>
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
         </div>
 
-        <footer id="footer"></footer>
+        <div id="company-details"></div>
-    </body>
+        <div id="company-address"></div>
+    </div>
 </html>

resources/views/pdf-designs/plain.html

@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -115,8 +102,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <p>$company.name</p>
 
             <div id="company-address"></div>
@@ -137,7 +126,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>

resources/views/pdf-designs/playful.html

@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
+                font-size: '$font-size';
-                padding: 0;
-                font-size: 14px;
             }
 
             @page {
-                margin-top: 1cm;
+                margin: 1cm;
-                margin-bottom: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -152,8 +139,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -188,7 +177,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>