From 9c9d574273a02ffa1810710232f0bbf27b758263 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 30 Jul 2025 18:47:30 +0200
Subject: [PATCH] wip #7673 @0.5

---
 app/Fluidbook/Compiler/Compiler.php           |   2 +-
 resources/views/extranet/totals.blade.php     |   2 +-
 .../fields/fluidbook_composition.blade.php    |  15 +-
 resources/views/fluidbook_stats/API.blade.php | 203 +++++++++---------
 .../views/fluidbook_stats/stats.blade.php     |  14 +-
 resources/views/team/leave/calendar.blade.php |  10 +-
 .../crud/inc/datatables_logic.blade.php       |   4 +-
 .../crud/inc/export_buttons.blade.php         |  41 ++--
 8 files changed, 143 insertions(+), 148 deletions(-)

diff --git a/app/Fluidbook/Compiler/Compiler.php b/app/Fluidbook/Compiler/Compiler.php
index cfdef504b..e98246be9 100644
--- a/app/Fluidbook/Compiler/Compiler.php
+++ b/app/Fluidbook/Compiler/Compiler.php
@@ -1962,7 +1962,7 @@ class Compiler extends Base implements CompilerInterface, IVirtualDirectoryError
         $menuColor = new Color($this->themeSettings->couleurB);
         $menuColor->setAlpha(1);
         $menuTextColor = Color::colorToCSS($this->themeSettings->subTextColor);
-        $menuBreakpoint = empty($this->fluidbookSettings->menuBreakpoint) ? '1023px' : $this->fluidbookSettings->menuBreakpoint;
+        $menuBreakpoint = empty($this->fluidbookSettings->menuBreakpoint) ? '1023px' : (is_int($this->fluidbookSettings->menuBreakpoint) ? $this->fluidbookSettings->menuBreakpoint . 'px' : $this->fluidbookSettings->menuBreakpoint);
 
         $this->lessVariables['menu-breakpoint'] = $menuBreakpoint;
         $this->lessVariables['menu-background'] = $menuColor->toCSS();
diff --git a/resources/views/extranet/totals.blade.php b/resources/views/extranet/totals.blade.php
index 3ff814ba8..4b5a63061 100644
--- a/resources/views/extranet/totals.blade.php
+++ b/resources/views/extranet/totals.blade.php
@@ -155,7 +155,7 @@
 
 @push('after_scripts')
     {{-- Charting library --}}
-    <script src=" https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js "></script>
+    <script src="/cdnproxy/cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>
     <script>
         const revenue = @json($chart_revenue);
         const prevision = @json($chart_revenue_prevision);
diff --git a/resources/views/fields/fluidbook_composition.blade.php b/resources/views/fields/fluidbook_composition.blade.php
index ae014d52f..eb12ab749 100644
--- a/resources/views/fields/fluidbook_composition.blade.php
+++ b/resources/views/fields/fluidbook_composition.blade.php
@@ -704,20 +704,13 @@
                 initPages();
             });
         </script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"
-                integrity="sha512-Eezs+g9Lq4TCCq0wae01s9PuNWzHYoCMkE97e2qdkYthpI0pzC3UGB03lgEHn2XM85hDOUF6qgqqszs+iXU4UA=="
-                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/keypress/2.1.5/keypress.min.js"
-                integrity="sha512-JjqUcblrwIZTQBPL/azOhVHwq5uaeXkKzq7da3JZEP14Zg926vZZVhRhBBi+L2pWYquZ6r5P8OZYDYgOChtkOw=="
-                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
-    @endpush
+        <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
+        <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/keypress/2.1.5/keypress.min.js"></script>
+        <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
 
     @push('crud_fields_styles')
         <link rel="stylesheet"
-              href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css"
-              integrity="sha512-SWjZLElR5l3FxoO9Bt9Dy3plCWlBi1Mc9/OlojDPwryZxO0ydpZgvXMLhV6jdEyULGNWjKgZWiX/AMzIvZ4JuA=="
-              crossorigin="anonymous" referrerpolicy="no-referrer"/>
+              href="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css"/>
         <style>
             #composition {
                 margin: 15px -10px 0 -10px;
diff --git a/resources/views/fluidbook_stats/API.blade.php b/resources/views/fluidbook_stats/API.blade.php
index 68c3a3109..aa6073253 100644
--- a/resources/views/fluidbook_stats/API.blade.php
+++ b/resources/views/fluidbook_stats/API.blade.php
@@ -1,6 +1,6 @@
 {{-- __('!! Statistiques') --}}
 {{-- Matomo Stats API Helper --}}
-<!DOCTYPE html>
+    <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -45,7 +45,8 @@
     -->
     <form class="options w-full space-y-2 flex-grow-0" @submit.prevent="loadAPI">
         <div class="flex items-center space-x-2">
-            <a href="https://developer.matomo.org/api-reference/reporting-api" class="text-yellow-200 hover:text-yellow-300 font-bold" target="_blank">Matomo API</a>
+            <a href="https://developer.matomo.org/api-reference/reporting-api"
+               class="text-yellow-200 hover:text-yellow-300 font-bold" target="_blank">Matomo API</a>
             <input x-model="generatedURL" class="flex-1 text-xs text-gray-500" @click="$el.select()">
         </div>
 
@@ -112,45 +113,45 @@
             period: 'month',
             date: '{{ date('Y') }}-01-01,today',
 
-      get server() {
-        if (!this.siteID) return false;
-        let ID = parseInt(this.siteID)
+            get server() {
+                if (!this.siteID) return false;
+                let ID = parseInt(this.siteID)
 
-        if (ID < 21210) return 'stats3.fluidbook.com';
-        else if (ID >= 21210 && ID % 2 === 0) return 'stats4.fluidbook.com';
-        else return 'stats5.fluidbook.com';
+                if (ID < 21210) return 'stats3.fluidbook.com';
+                else if (ID >= 21210 && ID % 2 === 0) return 'stats4.fluidbook.com';
+                else return 'stats5.fluidbook.com';
 
-      },
+            },
 
-      get generatedURL() {
-        return `https://${this.server}/?idSite=${this.siteID}&method=${this.method}&date=${this.date}&period=${this.period}&module=API&token_auth=${this.servers[this.server]}&format=JSON`
-      },
+            get generatedURL() {
+                return `https://${this.server}/?idSite=${this.siteID}&method=${this.method}&date=${this.date}&period=${this.period}&module=API&token_auth=${this.servers[this.server]}&format=JSON`
+            },
 
-      loadAPI() {
-        let $this = this;
+            loadAPI() {
+                let $this = this;
 
-        if (this.method === '') return false;
+                if (this.method === '') return false;
 
-        fetch(this.generatedURL)
-          .then(response => response.json())
-          .then((data) => {
-              //$this.result = JSON.stringify(data, null, 2)
-              // let filteredData = Object.entries(data).filter(([key, value]) => !Array.isArray(value));
-              // Filter out empty results from the API...
-              let filteredData = Object.fromEntries(Object.entries(data).filter(([key, value]) => !Array.isArray(value) || (Array.isArray(value) && value.length > 0)));
-              // window.formatter = new JSONFormatter(filteredData, Infinity, { animateClose: false });
-              // $this.$refs.result.insertAdjacentHTML('afterbegin', window.formatter.render().innerHTML + '<br><hr><br>');
+                fetch(this.generatedURL)
+                    .then(response => response.json())
+                    .then((data) => {
+                        //$this.result = JSON.stringify(data, null, 2)
+                        // let filteredData = Object.entries(data).filter(([key, value]) => !Array.isArray(value));
+                        // Filter out empty results from the API...
+                        let filteredData = Object.fromEntries(Object.entries(data).filter(([key, value]) => !Array.isArray(value) || (Array.isArray(value) && value.length > 0)));
+                        // window.formatter = new JSONFormatter(filteredData, Infinity, { animateClose: false });
+                        // $this.$refs.result.insertAdjacentHTML('afterbegin', window.formatter.render().innerHTML + '<br><hr><br>');
 
-              console.log("data:", data);
-              console.log("filtered:", filteredData);
-              // return false;
+                        console.log("data:", data);
+                        console.log("filtered:", filteredData);
+                        // return false;
 
 
-              if ($this.period === 'range') { // When doing a range, data structure returned isn't the same as others
-                  filteredData = { [$this.date]: filteredData }
-              }
+                        if ($this.period === 'range') { // When doing a range, data structure returned isn't the same as others
+                            filteredData = {[$this.date]: filteredData}
+                        }
 
-              let requestDetails = `<h2 class="mb-4 font-medium text-sm flex">
+                        let requestDetails = `<h2 class="mb-4 font-medium text-sm flex">
                 <span @click="expanded = ! expanded" class="cursor-pointer">
                     <span class="inline-block transition" :class="expanded || '-rotate-90 opacity-50'">▼</span>
                     ${Object.values(filteredData).length} results for <span class="text-blue-600">${$this.method}</span>
@@ -162,101 +163,101 @@
                 <button class="leading-none ml-2 text-red-500 text-xl" @click="$event.target.parentElement.parentElement.remove()" title="Remove">&times;</button>
               </h2>`;
 
-              let result = '';
-
-              // See if the API has returned an array instead of an object
-              // This test is done on the unfiltered data because the filtering process turns it into an object
-              if (Array.isArray(data)) {
-                  result += $this.tableFromData(data, true);
-
-              // Also check first item of filteredData object to see if it contains a nested array of data
-              } else if (Array.isArray(Object.values(filteredData)[0])) {
-                  for (const [date, nestedData] of Object.entries(filteredData)) {
-                      console.log(date, nestedData)
-                      result += `<h3 class="bg-gray-700 font-bold mt-4 mb-2 rounded px-3 py-1 text-white text-sm w-max">${date}</h3>`;
-                      result += $this.tableFromData(nestedData, true);
-                  }
-              } else {
-                  result += $this.tableFromData(filteredData);
-              }
-
-              let html = `<div class="API-result" x-data="{ expanded: true }">
+                        let result = '';
+
+                        // See if the API has returned an array instead of an object
+                        // This test is done on the unfiltered data because the filtering process turns it into an object
+                        if (Array.isArray(data)) {
+                            result += $this.tableFromData(data, true);
+
+                            // Also check first item of filteredData object to see if it contains a nested array of data
+                        } else if (Array.isArray(Object.values(filteredData)[0])) {
+                            for (const [date, nestedData] of Object.entries(filteredData)) {
+                                console.log(date, nestedData)
+                                result += `<h3 class="bg-gray-700 font-bold mt-4 mb-2 rounded px-3 py-1 text-white text-sm w-max">${date}</h3>`;
+                                result += $this.tableFromData(nestedData, true);
+                            }
+                        } else {
+                            result += $this.tableFromData(filteredData);
+                        }
+
+                        let html = `<div class="API-result" x-data="{ expanded: true }">
                             ${requestDetails}
                             <div class="API-result-content" x-show="expanded" x-collapse>${result}</div>
                           </div>`;
 
-              $this.$refs.result.insertAdjacentHTML('afterbegin', html)
+                        $this.$refs.result.insertAdjacentHTML('afterbegin', html)
 
-          });
-      },
+                    });
+            },
 
-      tableFromData(filteredData, hideDateColumn) {
-          let tableClasses = 'border-collapse border border-slate-500 p-2 text-xs';
-          let table = `<table class="${tableClasses}">`;
-          let firstRow = Object.values(filteredData)[0];
+            tableFromData(filteredData, hideDateColumn) {
+                let tableClasses = 'border-collapse border border-slate-500 p-2 text-xs';
+                let table = `<table class="${tableClasses}">`;
+                let firstRow = Object.values(filteredData)[0];
 
-          let headings = (typeof firstRow === 'object') ?
-              Object.keys(firstRow).map(heading => `<th class="${tableClasses}">${heading}</th>`).join("")
-              :
-              `<th class="${tableClasses}">&nbsp;</th>`; // Only a singular value returned by API
+                let headings = (typeof firstRow === 'object') ?
+                    Object.keys(firstRow).map(heading => `<th class="${tableClasses}">${heading}</th>`).join("")
+                    :
+                    `<th class="${tableClasses}">&nbsp;</th>`; // Only a singular value returned by API
 
-          table += `<tr class="bg-gray-400 sticky" style="top: calc(-1.5rem - 1px)">`;
+                table += `<tr class="bg-gray-400 sticky" style="top: calc(-1.5rem - 1px)">`;
 
-          if (!hideDateColumn) {
-              table += `<th class="${tableClasses}">Date</th>`
-          }
+                if (!hideDateColumn) {
+                    table += `<th class="${tableClasses}">Date</th>`
+                }
 
-          table += headings;
-          table += `</tr>`;
+                table += headings;
+                table += `</tr>`;
 
-          Object.entries(filteredData).forEach(function(datedSet, index) {
+                Object.entries(filteredData).forEach(function (datedSet, index) {
 
-              // console.log('datedSet...', datedSet);
+                    // console.log('datedSet...', datedSet);
 
-              let date = datedSet[0];
-              let dateData = datedSet[1];
+                    let date = datedSet[0];
+                    let dateData = datedSet[1];
 
-              table += `<tr class="transition hover:bg-yellow-100 ${ index % 2 === 1 ? 'bg-gray-200' : '' }">`;
+                    table += `<tr class="transition hover:bg-yellow-100 ${index % 2 === 1 ? 'bg-gray-200' : ''}">`;
 
-              if (!hideDateColumn) {
-                  table += `<td class="${tableClasses}">${date}</td>`;
-              }
+                    if (!hideDateColumn) {
+                        table += `<td class="${tableClasses}">${date}</td>`;
+                    }
 
-              if (typeof dateData === 'object') {
-                  // The table headings are based on the object keys from the first row but the API doesn't always
-                  // return the same set of data. As such, we need to check that the key exists for each row...
-                  table += Object.keys(firstRow).map(heading_key =>
-                      `<td class="${tableClasses}">${ typeof dateData[heading_key] === 'undefined' ? '–' : dateData[heading_key] }</td>`
-                  ).join("");
-                  //table += dateData.map(value => `<td class="${tableClasses}">${value}</td>`).join("");
-              } else {
-                  table += `<td class="${tableClasses}">${dateData}</td>`;
-              }
+                    if (typeof dateData === 'object') {
+                        // The table headings are based on the object keys from the first row but the API doesn't always
+                        // return the same set of data. As such, we need to check that the key exists for each row...
+                        table += Object.keys(firstRow).map(heading_key =>
+                            `<td class="${tableClasses}">${typeof dateData[heading_key] === 'undefined' ? '–' : dateData[heading_key]}</td>`
+                        ).join("");
+                        //table += dateData.map(value => `<td class="${tableClasses}">${value}</td>`).join("");
+                    } else {
+                        table += `<td class="${tableClasses}">${dateData}</td>`;
+                    }
 
-              table += `</tr>`;
+                    table += `</tr>`;
 
-              // dateData.forEach(function(data) {
-              // console.log('... data', data);
-              // table += `<tr>`;
-              // table += `<td>${date}</td>`;
-              // table += data.map(value => `<td>${value}</td>`).join("");
-              // table += `</tr>`;
-              // })
-          });
+                    // dateData.forEach(function(data) {
+                    // console.log('... data', data);
+                    // table += `<tr>`;
+                    // table += `<td>${date}</td>`;
+                    // table += data.map(value => `<td>${value}</td>`).join("");
+                    // table += `</tr>`;
+                    // })
+                });
 
-          table += '</table>';
+                table += '</table>';
 
-          return table;
-      }
+                return table;
+            }
 
+        }
     }
-  }
 </script>
 
 <!-- Alpine Plugins -->
-<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+<script defer src="/cdnproxy/unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
 <!-- Alpine Core -->
-<script src="//unpkg.com/alpinejs" defer></script>
-{{--<script src="https://unpkg.com/json-formatter-js"></script>--}}
+<script src="/cdnproxy/unpkg.com/alpinejs" defer></script>
+{{--<script src="/cdnproxy/unpkg.com/json-formatter-js"></script>--}}
 </body>
 </html>
diff --git a/resources/views/fluidbook_stats/stats.blade.php b/resources/views/fluidbook_stats/stats.blade.php
index 4d29c7056..d619d7fd5 100644
--- a/resources/views/fluidbook_stats/stats.blade.php
+++ b/resources/views/fluidbook_stats/stats.blade.php
@@ -5,13 +5,11 @@
     when the report HTML and extra scripts are injected --}}
 
     {{-- Charting library --}}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
-            integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
 
     {{-- Date Range picker: https://www.daterangepicker.com/ --}}
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <script type="text/javascript" src="/cdnproxy/cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
+    <script type="text/javascript" src="/cdnproxy/cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 
     {{-- Simple Table Sorter --}}
     <script type="text/javascript" src="{{ asset('packages/sorttable/sorttable.js') }}"></script>
@@ -19,7 +17,7 @@
 @endpush
 
 @section('after_styles')
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
+    <link rel="stylesheet" type="text/css" href="/cdnproxy/cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
     <link rel="stylesheet" type="text/css" href="{{asset('packages/fluidbook/toolbox/css/stats.css')}}">
 @endsection
 
@@ -559,8 +557,8 @@
 
 
             </script>
-            <script src="https://unpkg.com/@popperjs/core@2"></script>
-            <script src="https://unpkg.com/tippy.js@6"></script>
+            <script src="/cdnproxy/unpkg.com/@popperjs/core@2"></script>
+            <script src="/cdnproxy/unpkg.com/tippy.js@6"></script>
         @endpush
 
     </div>
diff --git a/resources/views/team/leave/calendar.blade.php b/resources/views/team/leave/calendar.blade.php
index 9ef38c85a..cf6ab2fe4 100644
--- a/resources/views/team/leave/calendar.blade.php
+++ b/resources/views/team/leave/calendar.blade.php
@@ -14,11 +14,11 @@
         border-radius: 2px;
     }
 </style>
-<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet'/>
-<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
-<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js'></script>
-<script src='https://github.com/mozilla-comm/ical.js/releases/download/v1.4.0/ical.js'></script>
-<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.11.3/main.global.min.js'></script>
+<link href='/cdnproxy/cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet'/>
+<script src='/cdnproxy/cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
+<script src='/cdnproxy/cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js'></script>
+<script src='/cdnproxy/github.com/mozilla-comm/ical.js/releases/download/v1.4.0/ical.js'></script>
+<script src='/cdnproxy/cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.11.3/main.global.min.js'></script>
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         var calendarEl = document.getElementById('leave-calendar');
diff --git a/resources/views/vendor/backpack/crud/inc/datatables_logic.blade.php b/resources/views/vendor/backpack/crud/inc/datatables_logic.blade.php
index cfa9e204b..a4224e5f3 100644
--- a/resources/views/vendor/backpack/crud/inc/datatables_logic.blade.php
+++ b/resources/views/vendor/backpack/crud/inc/datatables_logic.blade.php
@@ -8,8 +8,8 @@
 @endphp
 
 {{-- DATA TABLES SCRIPT --}}
-<script src="https://unpkg.com/@popperjs/core@2"></script>
-<script src="https://unpkg.com/tippy.js@6"></script>
+<script src="/cdnproxy/unpkg.com/@popperjs/core@2"></script>
+<script src="/cdnproxy/unpkg.com/tippy.js@6"></script>
 <script type="text/javascript" src="{{ asset('packages/datatables.net/js/jquery.dataTables.min.js') }}"></script>
 <script type="text/javascript"
         src="{{ asset('packages/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
diff --git a/resources/views/vendor/backpack/crud/inc/export_buttons.blade.php b/resources/views/vendor/backpack/crud/inc/export_buttons.blade.php
index a5a6b7b92..464949a83 100644
--- a/resources/views/vendor/backpack/crud/inc/export_buttons.blade.php
+++ b/resources/views/vendor/backpack/crud/inc/export_buttons.blade.php
@@ -1,12 +1,12 @@
 @if ($crud->exportButtons())
-    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
-    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js" type="text/javascript"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/vfs_fonts.js" type="text/javascript"></script>
-    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
-    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js" type="text/javascript"></script>
-    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/vfs_fonts.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js" type="text/javascript"></script>
+    <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js" type="text/javascript"></script>
     <script>
         let dataTablesExportStrip = text => {
             if ( typeof text !== 'string' ) {
@@ -90,18 +90,21 @@
 
         // move the datatable buttons in the top-right corner and make them smaller
         function moveExportButtonsToTopRight() {
-            crud.table.buttons().each(function(button) {
-                if (button.node.className.indexOf('buttons-columnVisibility') == -1 && button.node.nodeName=='BUTTON')
-                {
-                    button.node.className = button.node.className + " btn-sm";
-                }
-            })
+            try {
+                crud.table.buttons().each(function (button) {
+                    if (button.node.className.indexOf('buttons-columnVisibility') == -1 && button.node.nodeName == 'BUTTON') {
+                        button.node.className = button.node.className + " btn-sm";
+                    }
+                })
 
-            $(".dt-buttons").appendTo($('#datatable_button_stack' ));
-            $('.dt-buttons').addClass('d-xs-block')
-                .addClass('d-sm-inline-block')
-                .addClass('d-md-inline-block')
-                .addClass('d-lg-inline-block');
+                $(".dt-buttons").appendTo($('#datatable_button_stack'));
+                $('.dt-buttons').addClass('d-xs-block')
+                    .addClass('d-sm-inline-block')
+                    .addClass('d-md-inline-block')
+                    .addClass('d-lg-inline-block');
+            }catch (e) {
+
+            }
         }
 
         crud.addFunctionToDataTablesDrawEventQueue('moveExportButtonsToTopRight');
-- 
2.39.5