Merge pull request #4049 from beganovich/v2-design-tfoot

Invoice/quote designs improvements

app/Http/Controllers/PreviewController.php

@@ -173,7 +173,11 @@ class PreviewController extends BaseController
 
         $html = new HtmlEngine(null, $invoice->invitations()->first(), 'invoice');
 
-        $design = new Design(strtolower(request()->design['name']));
+        if (isset(request()->design['name'])) {
+            $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);
@@ -193,7 +197,7 @@ class PreviewController extends BaseController
             ->design($design)
             ->build();
 
-        info($maker->getCompiledHTML(true));
+        // info($maker->getCompiledHTML(true));
 
         $file_path = PreviewPdf::dispatchNow($maker->getCompiledHTML(true), auth()->user()->company());
 

app/Services/PdfMaker/Design.php

@@ -45,6 +45,7 @@ class Design extends BaseDesign
     const MODERN = 'modern';
     const PLAIN = 'plain';
     const PLAYFUL = 'playful';
+    const CUSTOM = 'custom';
 
     public function __construct(string $design = null, array $options = [])
     {
@@ -55,6 +56,12 @@ class Design extends BaseDesign
 
     public function html(): ?string
     {
+        if ($this->design == 'custom.html') {
+            return $this->composeFromPartials(
+                $this->options['custom_partials']
+            );
+        }
+
         $path = isset($this->options['custom_path'])
             ? $this->options['custom_path']
             : config('ninja.designs.base_path');
@@ -93,6 +100,10 @@ class Design extends BaseDesign
                 'id' => 'product-table',
                 'elements' => $this->productTable(),
             ],
+            'product-table-footer' => [
+                'id' => 'product-table-footer',
+                'elements' => $this->tableFooter(),
+            ],
             'footer-elements' => [
                 'id' => 'footer',
                 'elements' => [
@@ -166,7 +177,6 @@ class Design extends BaseDesign
         return  [
             ['element' => 'thead', 'elements' => $this->buildTableHeader()],
             ['element' => 'tbody', 'elements' => $this->buildTableBody()],
-            ['element' => 'tfoot', 'elements' => $this->tableFooter()],
         ];
     }
 
@@ -211,8 +221,8 @@ class Design extends BaseDesign
         $variables = $this->context['pdf_variables']['total_columns'];
 
         $elements = [
-            ['element' => 'tr', 'elements' => [
+            ['element' => 'div', 'elements' => [
-                ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['colspan' => '100%']],
+                ['element' => 'span', 'content' => '$entity.public_notes', 'properties' => ['data-element' => 'product-table-public-notes-label']],
             ]],
         ];
 
@@ -221,10 +231,10 @@ class Design extends BaseDesign
                 continue;
             }
 
-            $elements[] = ['element' => 'tr', 'elements' => [
+            $elements[] = ['element' => 'div', 'elements' => [
-                ['element' => 'td', 'properties' => ['colspan' => $this->calculateColspan(2)]],
+                ['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
-                ['element' => 'td', 'content' => $variable.'_label'],
+                ['element' => 'span', 'content' => $variable.'_label'],
-                ['element' => 'td', 'content' => $variable],
+                ['element' => 'span', 'content' => $variable],
             ]];
         }
 

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

@@ -159,7 +159,7 @@ trait DesignHelpers
 
     public function sharedFooterElements()
     {
-        return ['element' => 'div', 'properties' => ['style' => 'display: flex; justify-content: space-between'], 'elements' => [
+        return ['element' => 'div', 'properties' => ['style' => 'display: flex; justify-content: space-between; margin-top: 1.5rem'], 'elements' => [
             ['element' => 'img', 'properties' => ['src' => '$contact.signature', 'style' => 'height: 5rem;']],
             ['element' => 'img', 'properties' => ['src' => '$app_url/images/created-by-invoiceninja-new.png', 'style' => 'height: 5rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false']],
         ]];
@@ -186,4 +186,15 @@ trait DesignHelpers
 
         return false;
     }
+
+    public function composeFromPartials(array $partials)
+    {
+        $html = '';
+
+        $html .= $partials['header'];
+        $html .= $partials['body'];
+        $html .= $partials['footer'];
+
+        return $html;
+    }
 }

app/Services/PdfMaker/PdfMakerUtilities.php

@@ -55,7 +55,7 @@ trait PdfMakerUtilities
 
             if (isset($element['tag'])) {
                 $node = $this->document->getElementsByTagName($element['tag'])->item(0);
-            } elseif (! is_null($this->document->getElementById($element['id']))) {
+            } elseif (!is_null($this->document->getElementById($element['id']))) {
                 $node = $this->document->getElementById($element['id']);
             } else {
                 continue;
@@ -80,7 +80,7 @@ trait PdfMakerUtilities
         $processed = [];
 
         foreach ($children as $child) {
-            if (! isset($child['order'])) {
+            if (!isset($child['order'])) {
                 $child['order'] = 0;
             }
 
@@ -163,7 +163,11 @@ trait PdfMakerUtilities
 
     public function processOptions()
     {
-        if (! isset($this->options['all_pages_header']) && ! isset($this->options['all_pages_footer'])) {
+        if (!isset($this->options['all_pages_header']) || $this->options['all_pages_header'] == false) {
+            return;
+        }
+        
+        if (!isset($this->options['all_pages_footer']) || $this->options['all_pages_footer'] == false) {
             return;
         }
 
@@ -265,6 +269,8 @@ trait PdfMakerUtilities
             $this->document->getElementById('repeat-content')->appendChild($clone);
         }
 
+        info($this->data['options']);
+
         if (
             $header = $this->document->getElementById('header') &&
             isset($this->data['options']['all_pages_header']) &&

resources/views/pdf-designs/bold.html

@@ -12,6 +12,11 @@
             font-size: 14px;
         }
 
+        @page {
+            margin-top: 1cm;
+            margin-bottom: 1cm;
+        }
+
         body {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
@@ -89,31 +94,48 @@
             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 > tfoot > tr > td {
+
-            padding: 1.5rem;
+        #product-table-footer > * {
+            display: grid;
+            grid-template-columns: 3fr 1fr 1fr;
+            padding-top: 1.2rem;
+            padding-left: 1.2rem;
+            gap: 20px;
         }
-        #product-table > tfoot [data-element='balance-due-label'],
+        #product-table-footer
-        #product-table > tfoot [data-element='balance-due'] {
+            > *
+            [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 > tfoot [data-element='balance-due'] {
+        #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><!-- Empty space placeholder--></div>
 
             <div id="company-details"></div>
             <div id="company-address"></div>
@@ -135,6 +157,8 @@
 
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/business.html

@@ -4,12 +4,25 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <style>
+        <style id="style">
             body {
                 margin: 2rem;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
                 font-family: Arial, Helvetica, sans-serif;
+                font-size: 14px;
+            }
+
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
             }
 
             .header-container {
@@ -98,29 +111,20 @@
             }
             #product-table > thead > tr > th:last-child {
                 border-top-right-radius: 1rem;
+                text-align: right;
             }
             #product-table > tbody > tr > td {
                 padding: 1rem;
             }
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr:nth-child(odd) > td {
                 background: #e8e8e8;
             }
             #product-table > tbody > tr:nth-child(even) > td {
                 background: #f7f7f7;
             }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-                background: #e8e8e8;
-            }
-            #product-table > tfoot > tr:nth-last-child(1) > td:first-child {
-                border-bottom-left-radius: 1rem;
-            }
-            #product-table > tfoot > tr:nth-last-child(1) > td:last-child {
-                border-bottom-right-radius: 1rem;
-            }
-            #product-table > tfoot > td {
-                border: none !important;
-            }
 
             [data-element='product-table-balance-due-label'],
             [data-element='product-table-balance-due'] {
@@ -134,6 +138,37 @@
                     margin-right: 0;
                 }
             }
+            #product-table-footer > *:last-child {
+                border-bottom-left-radius: 1rem;
+                border-bottom-right-radius: 1rem;
+            }
+            #product-table-footer > * {
+                background-color: #f7f7f7;
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                gap: 20px;
+                padding-left: 1rem;
+                padding-top: 0.5rem;
+                padding-bottom: 0.8rem;
+            }
+            #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.2rem;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: red;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
+            }
         </style>
     </head>
 
@@ -160,6 +195,8 @@
 
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/clean.html

@@ -13,6 +13,11 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             @media print {
                 body {
                     margin-top: 0;
@@ -101,13 +106,31 @@
             #product-table > tbody > tr:nth-child(odd) {
                 background-color: #f5f5f5;
             }
-            #product-table > tfoot > tr > td {
+
-                padding: 1rem;
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1rem;
+                padding-left: 1rem;
+                gap: 20px;
             }
-            #product-table > tfoot [data-element='balance-due'] {
+            #product-table-footer
-                color: #67b1cc;
+                > *
+                [data-element='product-table-balance-due-label'],
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
                 font-weight: bold;
             }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #67b1cc;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
+            }
         </style>
     </head>
 
@@ -133,6 +156,8 @@
         <!-- product_table -->
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/creative.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -85,21 +90,40 @@
                 font-size: 1.1rem;
                 padding: 1rem;
             }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr > td {
                 padding: 1rem;
             }
             #product-table > tbody > tr:nth-child(odd) {
                 background-color: #e8e8e8;
             }
-            #product-table > tfoot > tr > td {
+
-                padding: 1rem;
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1rem;
             }
-            #product-table > tfoot > tr:last-child > td {
+            #product-table-footer
-                border-top: 5px solid #b21c53;
+                > *
-            }
+                [data-element='product-table-balance-due'] {
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                color: #b21c53;
                 font-weight: bold;
+                color: #b21c53;
+            }
+            #product-table-footer > * > * {
+                padding-left: 1rem;
+            }
+            #product-table-footer > *:last-child > * {
+                border-top: 5px solid #b21c53;
+                padding-top: 1rem;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
             }
         </style>
     </head>
@@ -131,6 +155,8 @@
 
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/elegant.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -95,19 +100,15 @@
                 color: #396d49;
                 font-weight: medium;
             }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr > td {
                 border-bottom: 1px solid;
                 padding: 1rem;
             }
-            #product-table > tfoot > tr > td {
+            #product-table > tbody > tr > td:last-child {
-                padding: 1rem;
+                text-align: right;
-            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                border-top: 1px solid;
-                border-bottom: 1px solid;
             }
 
             .thanks-label {
@@ -118,6 +119,31 @@
                 padding-bottom: 1rem;
                 border-bottom: 4px solid;
             }
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1rem;
+                padding-left: 1rem;
+                gap: 20px;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due-label'],
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                font-weight: bold;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #396d49;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 0.5rem;
+            }
         </style>
     </head>
 
@@ -154,6 +180,8 @@
 
         <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" />

resources/views/pdf-designs/hipster.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -108,23 +113,41 @@
                 padding-left: 1rem;
                 border-left: 1px solid;
             }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr > td {
                 padding: 1rem;
                 border-left: 1px solid;
             }
-            #product-table > tfoot > tr > td {
+            #product-table > tbody > tr td:last-child {
-                padding: 1rem;
+                text-align: right;
             }
-            #product-table > tfoot > tr > td:nth-last-child(1),
+
-            #product-table > tfoot > tr td:nth-last-child(2) {
+            #product-table-footer > * {
-                border-left: 1px solid;
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1.5rem;
+                padding-left: 1rem;
+                gap: 20px;
             }
-            #product-table
+            #product-table-footer
-                > tfoot
+                > *
                 [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
                 font-weight: bold;
             }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #bba238;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
+            }
         </style>
     </head>
 
@@ -181,6 +204,8 @@
 
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/modern.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -79,6 +84,9 @@
                 background-color: #3f3e3c;
                 color: white;
             }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr > td {
                 border-bottom: 1px solid #3f3e3c;
                 padding: 1rem;
@@ -86,19 +94,8 @@
             #product-table > tbody > tr > td:first-child {
                 font-weight: bold;
             }
-            #product-table > tfoot > tr > td {
+            #product-table > tbody > tr > td:last-child {
-                padding: 1rem;
+                text-align: right;
-            }
-            #product-table > tfoot [data-element='balance-due-row'] > td {
-                background-color: #3f3e3c;
-                color: white;
-            }
-            #product-table > tfoot [data-element='balance-due-label'] {
-                font-weight: bold;
-                font-size: 1.2rem;
-            }
-            #product-table > tfoot [data-element='balance-due'] {
-                font-size: 1.2rem;
             }
 
             .footer-wrapper {
@@ -121,6 +118,36 @@
             #company-details > * {
                 margin-bottom: 0.5rem;
             }
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                margin-top: 1.5rem;
+                margin-right: 1.5rem;
+                margin-left: 1.5rem;
+            }
+            #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.3rem;
+            }
+            #product-table-footer > * > * {
+                padding-left: 1.5rem;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
+            }
+            #product-table-footer > *:last-child {
+                background-color: #3f3e3c;
+                color: white;
+                padding-top: 0.7rem;
+                padding-bottom: 0.7rem;
+            }
         </style>
     </head>
 
@@ -143,17 +170,19 @@
 
         <div class="table-wrapper">
             <table id="product-table" cellspacing="0"></table>
+
+            <div id="product-table-footer" cellspacing="0"></div>
         </div>
-        
+
         <div class="footer-wrapper">
             <div>
                 <!-- Placeholder for offset -->
             </div>
-            
+
             <div id="company-details"></div>
             <div id="company-address"></div>
         </div>
-        
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/plain.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -77,18 +82,35 @@
                 padding: 1rem;
                 background-color: #e6e6e6;
             }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
             #product-table > tbody > tr > td {
                 border-bottom: 1px solid #e6e6e6;
                 padding: 1rem;
             }
-            #product-table > tfoot > tr > td {
+            #product-table > tbody > tr > td:last-child {
-                padding: 1rem;
+                text-align: right;
             }
-            #product-table
+
-                > tfoot
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1rem;
+                padding-left: 1rem;
+                gap: 20px;
+            }
+            #product-table-footer
+                > *
                 [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
+            #product-table-footer
-                background-color: #e6e6e6;
+                > *
+                [data-element='product-table-balance-due'] {
+                font-weight: bold;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
             }
         </style>
     </head>
@@ -111,9 +133,11 @@
         </div>
 
         <div id="client-details"></div>
-        
+
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>

resources/views/pdf-designs/playful.html

@@ -11,6 +11,11 @@
                 font-size: 14px;
             }
 
+            @page {
+                margin-top: 1cm;
+                margin-bottom: 1cm;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -98,6 +103,9 @@
                 background: #009e90;
                 color: white;
             }
+            #product-table > thead tr > th:last-child {
+                text-align: right;
+            }
             #product-table > thead tr > th:first-child {
                 border-top-left-radius: 10px;
                 border-bottom-left-radius: 10px;
@@ -113,22 +121,33 @@
             #product-table > tbody > tr > td:first-child {
                 color: #bb3a24;
             }
-            #product-table > tfoot > tr > td {
+            #product-table > tbody > tr > td:last-child {
-                padding: 1rem;
+                text-align: right;
             }
-            #product-table
+
-                > tfoot
+            #product-table-footer > * {
-                [data-element='product-table-balance-due-label'] {
+                display: grid;
-                background-color: #009e90;
+                grid-template-columns: 3fr 1fr 1fr;
-                color: white;
+                padding-top: 1rem;
-                border-top-left-radius: 10px;
+                padding-left: 1rem;
-                border-bottom-left-radius: 10px;
+                gap: 20px;
             }
-            #product-table > tfoot [data-element='product-table-balance-due'] {
+            #product-table-footer
-                background-color: #009e90;
+                > *
-                color: white;
+                [data-element='product-table-balance-due-label'],
-                border-top-right-radius: 10px;
+            #product-table-footer
-                border-bottom-right-radius: 10px;
+                > *
+                [data-element='product-table-balance-due'] {
+                font-weight: bold;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #009e90;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1rem;
             }
         </style>
     </head>
@@ -168,6 +187,8 @@
 
         <table id="product-table" cellspacing="0"></table>
 
+        <div id="product-table-footer" cellspacing="0"></div>
+
         <footer id="footer"></footer>
     </body>
 </html>