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

Invoice/quote designs improvements
2025-05-24 02:14:21 -04:00 · 2020-09-09 07:21:28 +10:00 · 2020-09-09 07:21:28 +10:00 · e341d5fcdd
commit e341d5fcdd
parent 9153bf5392 3104f4ed06
13 changed files with 368 additions and 98 deletions
--- a/app/Http/Controllers/PreviewController.php
+++ b/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());

--- a/app/Services/PdfMaker/Design.php
+++ b/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' => 'td', 'content' => '$entity.public_notes', 'properties' => ['colspan' => '100%']],
+            ['element' => 'div', 'elements' => [
+                ['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' => [
-                ['element' => 'td', 'properties' => ['colspan' => $this->calculateColspan(2)]],
-                ['element' => 'td', 'content' => $variable.'_label'],
-                ['element' => 'td', 'content' => $variable],
+            $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],
            ]];
        }

--- a/app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php
+++ b/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;
+    }
 }
--- a/app/Services/PdfMaker/PdfMakerUtilities.php
+++ b/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']) &&
--- a/resources/views/pdf-designs/bold.html
+++ b/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 > tfoot [data-element='balance-due'] {
+        #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 > 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>
--- a/resources/views/pdf-designs/business.html
+++ b/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>
--- a/resources/views/pdf-designs/clean.html
+++ b/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'] {
-                color: #67b1cc;
+            #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: #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>
--- a/resources/views/pdf-designs/creative.html
+++ b/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 {
-                border-top: 5px solid #b21c53;
-            }
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                color: #b21c53;
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
                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>
--- a/resources/views/pdf-designs/elegant.html
+++ b/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 {
-                padding: 1rem;
-            }
-            #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;
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
            }

            .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" />
--- a/resources/views/pdf-designs/hipster.html
+++ b/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 {
-                padding: 1rem;
+            #product-table > tbody > tr td:last-child {
+                text-align: right;
            }
-            #product-table > tfoot > tr > td:nth-last-child(1),
-            #product-table > tfoot > tr td:nth-last-child(2) {
-                border-left: 1px solid;
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1.5rem;
+                padding-left: 1rem;
+                gap: 20px;
            }
-            #product-table
-                > tfoot
+            #product-table-footer
+                > *
                [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>
--- a/resources/views/pdf-designs/modern.html
+++ b/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 {
-                padding: 1rem;
-            }
-            #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;
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
            }

            .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>
--- a/resources/views/pdf-designs/plain.html
+++ b/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 {
-                padding: 1rem;
+            #product-table > tbody > tr > td:last-child {
+                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'] {
-                background-color: #e6e6e6;
+            #product-table-footer
+                > *
+                [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>
--- a/resources/views/pdf-designs/playful.html
+++ b/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 {
-                padding: 1rem;
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'] {
-                background-color: #009e90;
-                color: white;
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1rem;
+                padding-left: 1rem;
+                gap: 20px;
            }
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                background-color: #009e90;
-                color: white;
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px;
+            #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: #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>