Improvements on CP tables; fixed #148

cp/resources/views/partials/js-applications.twig

@@ -116,12 +116,12 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Name') }}", field:"name", width:250, headerSort:false, formatter: domainLinkFormatter, responsive:0},
+            {title:"{{ __('Name') }}", field:"name", width:250, resizable:false, headerSort:false, formatter: domainLinkFormatter, responsive:0},
-            {title:"{{ __('Applicant') }}", width:150, field:"registrant.identifier", headerSort:false, responsive:2},
+            {title:"{{ __('Applicant') }}", width:150, field:"registrant.identifier", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Creation Date') }}", width:250, minWidth:150, field:"crdate", headerSort:false, responsive:2},
+            {title:"{{ __('Creation Date') }}", width:250, minWidth:150, field:"crdate", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Phase') }}", width:150, minWidth:100, field:"phase_type", formatter: phaseFormatter, headerSort:false, responsive:2},
+            {title:"{{ __('Phase') }}", width:150, minWidth:100, field:"phase_type", formatter: phaseFormatter, resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Status') }}", width:200, field:"application_status", formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"{{ __('Status') }}", width:200, field:"application_status", formatter: statusFormatter, resizable:false, headerSort:false, download:false, responsive:2},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort:false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                 if (e.target.closest('.delete-btn')) {
                     e.preventDefault(); // Prevent the default link behavior
                     Swal.fire({

cp/resources/views/partials/js-contacts.twig

@@ -95,11 +95,11 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Identifier') }}", field:"identifier", width:250, headerSort:false, formatter: contactLinkFormatter, responsive:0},
+            {title:"{{ __('Identifier') }}", field:"identifier", width:250, resizable:false, headerSort:false, formatter: contactLinkFormatter, responsive:0},
-            {title:"{{ __('Email') }}", field:"email", width:300, minWidth:200, headerSort:false, responsive:2},
+            {title:"{{ __('Email') }}", field:"email", width:300, minWidth:200, resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Phone') }}", field:"voice", width:300, minWidth:200, headerSort:false, responsive:2},
+            {title:"{{ __('Phone') }}", field:"voice", width:300, minWidth:200, resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Status') }}", field:"contact_status", width:200, minWidth:100, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"{{ __('Status') }}", field:"contact_status", width:200, minWidth:100, formatter: statusFormatter, resizable:false, headerSort:false, download:false, responsive:2},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort:false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                 if (e.target.closest('.delete-btn')) {
                     e.preventDefault(); // Prevent the default link behavior
                     Swal.fire({

cp/resources/views/partials/js-domains.twig

@@ -83,7 +83,7 @@
                 queryParts.push("filter3=exdate,cs," + encodeURIComponent(searchTerm));
             }
 
-            queryParts.push("order=id");
+            queryParts.push("order=name");
 
             // Include pagination parameters
             if (params.page) {
@@ -114,12 +114,12 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Name') }}", field:"name", width:200, headerSort:false, formatter: domainLinkFormatter, responsive:0},
+            {title:"{{ __('Name') }}", field:"name", width:200, resizable:false, headerSort:false, formatter: domainLinkFormatter, responsive:0},
-            {title:"{{ __('Registrant') }}", width:200, field:"registrant.identifier", headerSort:false, responsive:2},
+            {title:"{{ __('Registrant') }}", width:200, field:"registrant.identifier", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Creation Date') }}", width:250, minWidth:150, field:"crdate", headerSort:false, responsive:2},
+            {title:"{{ __('Creation Date') }}", width:250, minWidth:150, field:"crdate", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Expiration Date') }}", width:250, minWidth:150, field:"exdate", headerSort:false, responsive:2},
+            {title:"{{ __('Expiration Date') }}", width:250, minWidth:150, field:"exdate", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Status') }}", width:150, field:"domain_status", formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"{{ __('Status') }}", width:150, field:"domain_status", formatter: statusFormatter, resizable:false, headerSort:false, download:false, responsive:2},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort:false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                 if (e.target.closest('.delete-btn')) {
                     e.preventDefault(); // Prevent the default link behavior
                     Swal.fire({

cp/resources/views/partials/js-hosts.twig

@@ -94,10 +94,10 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Host Name') }}", field:"name", width:300, headerSort:false, formatter: hostLinkFormatter, responsive:0},
+            {title:"{{ __('Host Name') }}", field:"name", width:300, resizable:false, headerSort:false, formatter: hostLinkFormatter, responsive:0},
-            {title:"{{ __('Creation Date') }}", field:"crdate", width:300, minWidth:200, headerSort:false, responsive:2},
+            {title:"{{ __('Creation Date') }}", field:"crdate", width:300, minWidth:200, resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Status') }}", field:"host_status", width:300, minWidth:200, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"{{ __('Status') }}", field:"host_status", width:300, minWidth:200, formatter: statusFormatter, resizable:false, headerSort:false, download:false, responsive:2},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort:false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                 if (e.target.closest('.delete-btn')) {
                     e.preventDefault(); // Prevent the default link behavior
                     Swal.fire({

cp/resources/views/partials/js-invoices.twig

@@ -38,10 +38,10 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Number') }}", field:"invoice_number", width:200, headerSort:true, formatter: invoiceLinkFormatter, responsive:0},
+            {title:"{{ __('Number') }}", field:"invoice_number", width:200, resizable:false, headerSort:true, formatter: invoiceLinkFormatter, responsive:0},
-            {title:"{{ __('Registrar') }}", field:"registrar_id.name", width:300, headerSort:true, responsive:0},
+            {title:"{{ __('Registrar') }}", field:"registrar_id.name", width:300, resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Date') }}", field:"issue_date", width:300, headerSort:true, responsive:0},
+            {title:"{{ __('Date') }}", field:"issue_date", width:300, resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Amount') }}", field:"total_amount", width:200, headerSort:true, responsive:0, formatter:"money", formatterParams:{
+            {title:"{{ __('Amount') }}", field:"total_amount", width:200, resizable:false, headerSort:true, responsive:0, formatter:"money", formatterParams:{
                 decimal:".",
                 thousand:" ",
                 symbol:currency,

cp/resources/views/partials/js-log.twig

@@ -25,9 +25,9 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:0},
+            {title:"{{ __('Registrar') }}", field:"registrar_id.name", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Date') }}", field:"date", headerSort:true, responsive:0},
+            {title:"{{ __('Date') }}", field:"date", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Log') }}", field:"log", headerSort:true, responsive:2},
+            {title:"{{ __('Log') }}", field:"log", resizable:false, headerSort:true, responsive:2},
         ]
     });
     var searchInput = document.getElementById("search-input");

cp/resources/views/partials/js-logs.twig

@@ -29,30 +29,68 @@
 
     document.addEventListener("DOMContentLoaded", function(){
     fetchAndCacheRegistrars();
+    
+    var searchTerm = ""; // global variable to hold the search term
+
+    function updateSearchTerm(term) {
+        searchTerm = term;
+        table.replaceData();
+    }
 
     table = new Tabulator("#logTable", {
-        ajaxURL:"/log-api/records/transaction_identifier", // Set the URL for your JSON data
+        pagination: true,
-        ajaxConfig:"GET",
+        paginationMode: "remote",
-        pagination:"local",
+        paginationSize: 10,
-        paginationSize:10,
+        ajaxURL: "/log-api/records/transaction_identifier",
-        ajaxResponse:function(url, params, response){
+        ajaxURLGenerator: function(url, config, params) {
-            return response.records;
+            var queryParts = [];
+
+            // Handle search term
+            if (searchTerm) {
+                queryParts.push("filter1=cldate,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter2=cmd,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter3=obj_id,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter4=obj_type,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter5=code,cs," + encodeURIComponent(searchTerm));
+            }
+
+            queryParts.push("order=cldate,desc");
+
+            // Include pagination parameters
+            if (params.page) {
+                queryParts.push("page=" + params.page + "," + params.size);
+            }
+
+            return url + "?" + queryParts.join("&");
+        },
+        ajaxResponse: function(url, params, response) {
+            if (response && Array.isArray(response.records) && typeof response.results === 'number') {
+                var lastPage = Math.ceil(response.results / this.options.paginationSize);
+                return {
+                    last_page: lastPage, // Calculated total number of pages
+                    data: response.records, // Data for the current page
+                };
+            } else {
+                console.error('Unexpected response format', response);
+                return { last_page: 1, data: [] };
+            }
+        },
+        dataReceiveParams: {
+            "last_page": "results", // Mapping 'results' to 'last_page'
         },
         layout:"fitDataFill",
         responsiveLayout: "collapse",
         responsiveLayoutCollapseStartOpen:false,
         resizableColumns:false,
-        initialSort:[
-            {column:"cldate", dir:"desc"}, // sorting by the "cldate" field in descending order
-        ],
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Date') }}", field:"cldate", headerSort:true, responsive:0},
+            {title:"{{ __('Date') }}", field:"cldate", resizable:false, headerSort:false, responsive:0},
             {
                 title: "{{ __('Registrar') }}", 
-                field: "registrar_id", 
+                field: "registrar_id",
-                headerSort: true, 
+                resizable:false,
+                headerSort: false, 
                 responsive: 2,
                 formatter: function(cell, formatterParams, onRendered) {
                     const registrarId = cell.getValue();
@@ -60,37 +98,18 @@
                     return name; // Return the name directly, as it is synchronously obtained from cache
                 }
             },
-            {title:"{{ __('Command') }}", field:"cmd", headerSort:true, responsive:0},
+            {title:"{{ __('Command') }}", field:"cmd", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Object Type') }}", field:"obj_type", headerSort:true, responsive:0},
+            {title:"{{ __('Object Type') }}", field:"obj_type", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Object') }}", field:"obj_id", headerSort:true, responsive:2},
+            {title:"{{ __('Object') }}", field:"obj_id", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Result') }}", field:"code", headerSort:true, responsive:2},
+            {title:"{{ __('Result') }}", field:"code", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Message') }}", field:"msg", headerSort:true, responsive:2, download:false},
+            {title:"{{ __('Message') }}", field:"msg", resizable:false, headerSort:false, responsive:2, download:false},
-            {title:"{{ __('clTRID') }}", field:"clTRID", headerSort:true, responsive:2, download:false},
+            {title:"{{ __('clTRID') }}", field:"clTRID", resizable:false, headerSort:false, responsive:2, download:false},
-            {title:"{{ __('Milliseconds') }}", field:"svmicrosecond", headerSort:false, download:false, responsive:2},
+            {title:"{{ __('Milliseconds') }}", field:"svmicrosecond", resizable:false, headerSort:false, download:false, responsive:2},
         ]
     });
     var searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function () {
-        var term = searchInput.value.toLowerCase();
+        updateSearchTerm(searchInput.value);
-
-        if (term) { // Only apply the filter when there's a term to search for
-            table.setFilter(function (data) {
-                // Check if any of the fields contain the search term
-                return (
-                    String(data.cldate).toLowerCase().includes(term) ||
-                    String(data.registrar_id).toLowerCase().includes(term) ||
-                    String(data.cmd).toLowerCase().includes(term) ||
-                    String(data.obj_type).toLowerCase().includes(term) ||
-                    String(data.obj_id).toLowerCase().includes(term) ||
-                    String(data.code).toLowerCase().includes(term) ||
-                    String(data.msg).toLowerCase().includes(term) ||
-                    String(data.clTRID).toLowerCase().includes(term) ||
-                    String(data.svmicrosecond).toLowerCase().includes(term)
-                );
-            });
-        } else {
-            table.clearFilter(); // Clear the filter when the search box is emptied
-        }
     });
     });
    

cp/resources/views/partials/js-overview.twig

@@ -8,29 +8,65 @@
     document.addEventListener("DOMContentLoaded", function(){
     
     currency = "{{ currency }} ";
+    var searchTerm = ""; // global variable to hold the search term
+
+    function updateSearchTerm(term) {
+        searchTerm = term;
+        table.replaceData();
+    }
 
     table = new Tabulator("#overviewTable", {
-        ajaxURL:"/api/records/payment_history?join=registrar", // Set the URL for your JSON data
+        pagination: true,
-        ajaxConfig:"GET",
+        paginationMode: "remote",
-        pagination:"local",
+        paginationSize: 10,
-        paginationSize:10,
+        ajaxURL: "/api/records/payment_history",
-        ajaxResponse:function(url, params, response){
+        ajaxParams: {
-            return response.records;
+            join: "registrar"
+        },
+        ajaxURLGenerator: function(url, config, params) {
+            var queryParts = ["join=registrar"];
+
+            // Handle search term
+            if (searchTerm) {
+                queryParts.push("filter1=date,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter2=description,cs," + encodeURIComponent(searchTerm));
+            }
+
+            queryParts.push("order=date,desc");
+
+            // Include pagination parameters
+            if (params.page) {
+                queryParts.push("page=" + params.page + "," + params.size);
+            }
+
+            return url + "?" + queryParts.join("&");
+        },
+        ajaxResponse: function(url, params, response) {
+            if (response && Array.isArray(response.records) && typeof response.results === 'number') {
+                var lastPage = Math.ceil(response.results / this.options.paginationSize);
+                return {
+                    last_page: lastPage, // Calculated total number of pages
+                    data: response.records, // Data for the current page
+                };
+            } else {
+                console.error('Unexpected response format', response);
+                return { last_page: 1, data: [] };
+            }
+        },
+        dataReceiveParams: {
+            "last_page": "results", // Mapping 'results' to 'last_page'
         },
         layout:"fitDataFill",
         responsiveLayout: "collapse",
         responsiveLayoutCollapseStartOpen:false,
         resizableColumns:false,
-        initialSort:[
-            {column:"date", dir:"desc"},
-        ],
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:0},
+            {title:"{{ __('Registrar') }}", field:"registrar_id.name", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Date') }}", field:"date", headerSort:true, responsive:2},
+            {title:"{{ __('Date') }}", field:"date", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Description') }}", field:"description", headerSort:true, responsive:2},
+            {title:"{{ __('Description') }}", field:"description", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Amount') }}", field:"amount", headerSort:true, download:false, responsive:0, formatter:"money", formatterParams:{
+            {title:"{{ __('Amount') }}", field:"amount", resizable:false, headerSort:false, download:false, responsive:0, formatter:"money", formatterParams:{
                 decimal:".",
                 thousand:" ",
                 symbol:currency,
@@ -40,21 +76,7 @@
     });
     var searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function () {
-        var term = searchInput.value.toLowerCase();
+        updateSearchTerm(searchInput.value);
-
-        if (term) { // Only apply the filter when there's a term to search for
-            table.setFilter(function (data) {
-                // Check if any of the fields contain the search term
-                return (
-                    String(data.registrar_id.name).toLowerCase().includes(term) ||
-                    String(data.date).toLowerCase().includes(term) ||
-                    String(data.description).toLowerCase().includes(term) ||
-                    String(data.amount).toString().toLowerCase().includes(term)
-                );
-            });
-        } else {
-            table.clearFilter(); // Clear the filter when the search box is emptied
-        }
     });
     });
    

cp/resources/views/partials/js-poll.twig

@@ -25,12 +25,12 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('ID') }}", field:"id", headerSort:true, responsive:2},
+            {title:"{{ __('ID') }}", field:"id", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:2},
+            {title:"{{ __('Registrar') }}", field:"registrar_id.name", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Date') }}", field:"qdate", headerSort:true, responsive:0},
+            {title:"{{ __('Date') }}", field:"qdate", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Message') }}", field:"msg", headerSort:true, responsive:0},
+            {title:"{{ __('Message') }}", field:"msg", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Message Type') }}", field:"msg_type", headerSort:true, responsive:0},
+            {title:"{{ __('Message Type') }}", field:"msg_type", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Object') }}", field:"obj_name_or_id", headerSort:true, responsive:2},
+            {title:"{{ __('Object') }}", field:"obj_name_or_id", resizable:false, headerSort:true, responsive:2},
         ]
     });
     var searchInput = document.getElementById("search-input");

cp/resources/views/partials/js-profile.twig

@@ -143,11 +143,11 @@
         placeholder: "{{ __('No log data for user.') }}",
         columns: [
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title: "{{ __('Event') }}", field: "user_event", minWidth:30, width:120, headerSort:false, responsive:0},
+            {title: "{{ __('Event') }}", field: "user_event", minWidth:30, width:120, resizable:false, headerSort:false, responsive:0},
-            {title: "{{ __('User Agent') }}", field: "user_agent", minWidth:30, width:500, headerSort:false, responsive:2},
+            {title: "{{ __('User Agent') }}", field: "user_agent", minWidth:30, width:500, resizable:false, headerSort:false, responsive:2},
-            {title: "{{ __('IP') }}", field: "user_ip", minWidth:30, width:150, headerSort:false, responsive:0},
+            {title: "{{ __('IP') }}", field: "user_ip", minWidth:30, width:150, resizable:false, headerSort:false, responsive:0},
-            {title: "{{ __('Location') }}", field: "user_location", minWidth:30, width:100, headerSort:false, responsive:0},
+            {title: "{{ __('Location') }}", field: "user_location", minWidth:30, width:100, resizable:false, headerSort:false, responsive:0},
-            {title: "{{ __('Timestamp') }}", field: "event_time", minWidth:30, width:250, headerSort:false, responsive:0},
+            {title: "{{ __('Timestamp') }}", field: "event_time", minWidth:30, width:250, resizable:false, headerSort:false, responsive:0},
         ]
     });
     });

cp/resources/views/partials/js-registrars.twig

@@ -42,10 +42,10 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Name') }}", field:"name", width:200, headerSort:true, formatter: registrarLinkFormatter, responsive:0},
+            {title:"{{ __('Name') }}", field:"name", width:200, resizable:false, headerSort:true, formatter: registrarLinkFormatter, responsive:0},
-            {title:"IANA ID", field:"iana_id", width:300, headerSort:true, responsive:2},
+            {title:"IANA ID", field:"iana_id", width:300, resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Email') }}", field:"email", width:300, headerSort:true, responsive:2},
+            {title:"{{ __('Email') }}", field:"email", width:300, resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Balance') }}", field:"accountBalance", width:300, headerSort:false, download:false, responsive:2, formatter:"money", formatterParams:{
+            {title:"{{ __('Balance') }}", field:"accountBalance", width:300, resizable:false, headerSort:false, download:false, responsive:2, formatter:"money", formatterParams:{
                 decimal:".",
                 thousand:" ",
                 symbol:currency,

cp/resources/views/partials/js-reports.twig

@@ -25,13 +25,13 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Date') }}", field:"date", headerSort:true, responsive:0},
+            {title:"{{ __('Date') }}", field:"date", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Total Domains') }}", field:"total_domains", headerSort:true, responsive:0},
+            {title:"{{ __('Total Domains') }}", field:"total_domains", resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Created Domains') }}", field:"created_domains", headerSort:true, responsive:2},
+            {title:"{{ __('Created Domains') }}", field:"created_domains", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Renewed Domains') }}", field:"renewed_domains", headerSort:true, responsive:2},
+            {title:"{{ __('Renewed Domains') }}", field:"renewed_domains", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Transferred Domains') }}", field:"transfered_domains", headerSort:true, responsive:2},
+            {title:"{{ __('Transferred Domains') }}", field:"transfered_domains", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Deleted Domains') }}", field:"deleted_domains", headerSort:true, responsive:2},
+            {title:"{{ __('Deleted Domains') }}", field:"deleted_domains", resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Restored Domains') }}", field:"restored_domains", headerSort:true, responsive:2, download:false}
+            {title:"{{ __('Restored Domains') }}", field:"restored_domains", resizable:false, headerSort:true, responsive:2, download:false}
         ]
     });
     var searchInput = document.getElementById("search-input");

cp/resources/views/partials/js-support.twig

@@ -91,11 +91,11 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Subject') }}", field:"subject", width:350, minWidth:100, headerSort:true, formatter: ticketLinkFormatter, responsive:0},
+            {title:"{{ __('Subject') }}", field:"subject", width:350, minWidth:100, resizable:false, headerSort:true, formatter: ticketLinkFormatter, responsive:0},
-            {title:"{{ __('Category') }}", field:"category_id.name", width:250, minWidth:80, formatter: catFormatter, headerSort:true, responsive:0},
+            {title:"{{ __('Category') }}", field:"category_id.name", width:250, minWidth:80, formatter: catFormatter, resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Status') }}", field:"status", headerSort:true, width:250, minWidth:100, formatter: statusFormatter, responsive:2},
+            {title:"{{ __('Status') }}", field:"status", resizable:false, headerSort:true, width:250, minWidth:100, formatter: statusFormatter, responsive:2},
-            {title:"{{ __('Priority') }}", field:"priority", headerSort:true, width:250, minWidth:100, formatter: priorityFormatter, responsive:2},
+            {title:"{{ __('Priority') }}", field:"priority", resizable:false, headerSort:true, width:250, minWidth:100, formatter: priorityFormatter, responsive:2},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ]
     });
     var searchInput = document.getElementById("search-input");

cp/resources/views/partials/js-transactions.twig

@@ -7,33 +7,72 @@
     var table;
     currency = "{{ currency }} ";
     document.addEventListener("DOMContentLoaded", function(){
+    
+    var searchTerm = ""; // global variable to hold the search term
+
+    function updateSearchTerm(term) {
+        searchTerm = term;
+        table.replaceData();
+    }
 
     table = new Tabulator("#transactionTable", {
-        ajaxURL:"/api/records/statement?join=registrar", // Set the URL for your JSON data
+        pagination: true,
-        ajaxConfig:"GET",
+        paginationMode: "remote",
-        pagination:"local",
+        paginationSize: 10,
-        paginationSize:10,
+        ajaxURL: "/api/records/statement",
-        ajaxResponse:function(url, params, response){
+        ajaxParams: {
-            return response.records;
+            join: "registrar"
+        },
+        ajaxURLGenerator: function(url, config, params) {
+            var queryParts = ["join=registrar"];
+
+            // Handle search term
+            if (searchTerm) {
+                queryParts.push("filter1=command,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter2=domain_name,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter3=fromS,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter4=toS,cs," + encodeURIComponent(searchTerm));
+            }
+
+            queryParts.push("order=date,desc");
+
+            // Include pagination parameters
+            if (params.page) {
+                queryParts.push("page=" + params.page + "," + params.size);
+            }
+
+            return url + "?" + queryParts.join("&");
+        },
+        ajaxResponse: function(url, params, response) {
+            if (response && Array.isArray(response.records) && typeof response.results === 'number') {
+                var lastPage = Math.ceil(response.results / this.options.paginationSize);
+                return {
+                    last_page: lastPage, // Calculated total number of pages
+                    data: response.records, // Data for the current page
+                };
+            } else {
+                console.error('Unexpected response format', response);
+                return { last_page: 1, data: [] };
+            }
+        },
+        dataReceiveParams: {
+            "last_page": "results", // Mapping 'results' to 'last_page'
         },
         layout:"fitDataFill",
         responsiveLayout: "collapse",
         responsiveLayoutCollapseStartOpen:false,
         resizableColumns:false,
-        initialSort:[
-            {column:"date", dir:"desc"},
-        ],
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:0},
+            {title:"{{ __('Registrar') }}", field:"registrar_id.name", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Date') }}", field:"date", headerSort:true, responsive:2},
+            {title:"{{ __('Date') }}", field:"date", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Command') }}", field:"command", headerSort:true, responsive:2},
+            {title:"{{ __('Command') }}", field:"command", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Domain') }}", field:"domain_name", headerSort:false, download:false, responsive:0},
+            {title:"{{ __('Domain') }}", field:"domain_name", resizable:false, headerSort:false, download:false, responsive:0},
-            {title:"{{ __('Length') }}", field:"length_in_months", headerSort:true, responsive:2},
+            {title:"{{ __('Length') }}", field:"length_in_months", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('From') }}", field:"fromS", headerSort:true, responsive:2},
+            {title:"{{ __('From') }}", field:"fromS", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('To') }}", field:"toS", headerSort:true, responsive:2},
+            {title:"{{ __('To') }}", field:"toS", resizable:false, headerSort:false, responsive:2},
-            {title:"{{ __('Amount') }}", field:"amount", headerSort:false, download:false, responsive:2, formatter:"money", formatterParams:{
+            {title:"{{ __('Amount') }}", field:"amount", resizable:false, headerSort:false, download:false, responsive:2, formatter:"money", formatterParams:{
                 decimal:".",
                 thousand:" ",
                 symbol:currency,
@@ -43,25 +82,7 @@
     });
     var searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function () {
-        var term = searchInput.value.toLowerCase();
+        updateSearchTerm(searchInput.value);
-
-        if (term) { // Only apply the filter when there's a term to search for
-            table.setFilter(function (data) {
-                // Check if any of the fields contain the search term
-                return (
-                    String(data.registrar_id.name).toLowerCase().includes(term) ||
-                    String(data.date).toLowerCase().includes(term) ||
-                    String(data.command).toLowerCase().includes(term) ||
-                    String(data.domain_name).toLowerCase().includes(term) ||
-                    String(data.length_in_months).toString().toLowerCase().includes(term) ||
-                    String(data.from).toLowerCase().includes(term) ||
-                    String(data.to).toLowerCase().includes(term) ||
-                    String(data.amount).toString().toLowerCase().includes(term)
-                );
-            });
-        } else {
-            table.clearFilter(); // Clear the filter when the search box is emptied
-        }
     });
     });
    

cp/resources/views/partials/js-transfers.twig

@@ -80,11 +80,11 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Name') }}", field:"name", width:300, minWidth:200, formatter: domainLinkFormatter, headerSort:true, responsive:0},
+            {title:"{{ __('Name') }}", field:"name", width:300, minWidth:200, formatter: domainLinkFormatter, resizable:false, headerSort:true, responsive:0},
-            {title:"{{ __('Initiated Date') }}", field:"redate", width:250, minWidth:150, headerSort:true, responsive:2},
+            {title:"{{ __('Initiated Date') }}", field:"redate", width:250, minWidth:150, resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Expiry Date') }}", field:"acdate", width:250, minWidth:150, headerSort:true, responsive:2},
+            {title:"{{ __('Expiry Date') }}", field:"acdate", width:250, minWidth:150, resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Status') }}", field:"trstatus", width:200, minWidth:150, headerSort:false, download:false, formatter: statusFormatter, responsive:0},
+            {title:"{{ __('Status') }}", field:"trstatus", width:200, minWidth:150, resizable:false, headerSort:false, download:false, formatter: statusFormatter, responsive:0},
-            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
+            {title: "{{ __('Actions') }}", formatter: actionsFormatter, resizable:false, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                 if (e.target.closest('.approve-btn')) {
                     e.preventDefault(); // Prevent the default link behavior
                     Swal.fire({

cp/resources/views/partials/js-users.twig

@@ -66,11 +66,11 @@
         placeholder: "{{ __('No Data') }}",
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"{{ __('Name') }}", field:"username", width:200, headerSort:true, formatter: userLinkFormatter, responsive:0},
+            {title:"{{ __('Name') }}", field:"username", width:200, resizable:false, headerSort:true, formatter: userLinkFormatter, responsive:0},
-            {title:"{{ __('Email') }}", field:"email", width:300, headerSort:true, responsive:2},
+            {title:"{{ __('Email') }}", field:"email", width:300, resizable:false, headerSort:true, responsive:2},
-            {title:"{{ __('Roles') }}", field:"roles_mask", width:200, headerSort:true, formatter: roleLabelFormatter, responsive:2},
+            {title:"{{ __('Roles') }}", field:"roles_mask", width:200, resizable:false, headerSort:true, formatter: roleLabelFormatter, responsive:2},
-            {title:"{{ __('Verified') }}", field:"verified", width:200, headerSort:true, formatter: verifiedFormatter, responsive:2},
+            {title:"{{ __('Verified') }}", field:"verified", width:200, resizable:false, headerSort:true, formatter: verifiedFormatter, responsive:2},
-            {title:"{{ __('Status') }}", field:"status", width:200, headerSort:true, formatter: statusBadgeFormatter, responsive:2},
+            {title:"{{ __('Status') }}", field:"status", width:200, resizable:false, headerSort:true, formatter: statusBadgeFormatter, responsive:2},
         ]
     });
     var searchInput = document.getElementById("search-input");