From 56ff89a37c4fb5b56a21e530d0d99f1be975eb99 Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Mon, 4 Dec 2023 17:21:37 +0200
Subject: [PATCH] Contacts and domains prepared for high load; patches

---
 .../{create.twig => createContact.twig}       |   0
 .../contacts/{view.twig => listContacts.twig} |   4 +-
 .../views/admin/domains/createDomain.twig     |   6 +-
 .../hosts/{create.twig => createHost.twig}    |   0
 .../admin/hosts/{view.twig => listHosts.twig} |   4 +-
 cp/resources/views/layouts/app.twig           |  12 +-
 cp/resources/views/partials/js-contacts.twig  | 103 ++++++++++++------
 cp/resources/views/partials/js-domains.twig   |  18 +--
 cp/resources/views/partials/js-hosts.twig     |  99 +++++++++++------
 cp/routes/web.php                             |  17 ++-
 10 files changed, 161 insertions(+), 102 deletions(-)
 rename cp/resources/views/admin/contacts/{create.twig => createContact.twig} (100%)
 rename cp/resources/views/admin/contacts/{view.twig => listContacts.twig} (97%)
 rename cp/resources/views/admin/hosts/{create.twig => createHost.twig} (100%)
 rename cp/resources/views/admin/hosts/{view.twig => listHosts.twig} (97%)

diff --git a/cp/resources/views/admin/contacts/create.twig b/cp/resources/views/admin/contacts/createContact.twig
similarity index 100%
rename from cp/resources/views/admin/contacts/create.twig
rename to cp/resources/views/admin/contacts/createContact.twig
diff --git a/cp/resources/views/admin/contacts/view.twig b/cp/resources/views/admin/contacts/listContacts.twig
similarity index 97%
rename from cp/resources/views/admin/contacts/view.twig
rename to cp/resources/views/admin/contacts/listContacts.twig
index d7a3116..8a38b30 100644
--- a/cp/resources/views/admin/contacts/view.twig
+++ b/cp/resources/views/admin/contacts/listContacts.twig
@@ -20,11 +20,11 @@
               <!-- Page title actions -->
               <div class="col-auto ms-auto d-print-none">
                 <div class="btn-list">
-                  <a href="{{route('contactcreate')}}" class="btn btn-primary d-none d-sm-inline-block">
+                  <a href="{{route('createContact')}}" class="btn btn-primary d-none d-sm-inline-block">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                     {{ __('Create Contact') }}
                   </a>
-                  <a href="{{route('contactcreate')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Create Contact') }}">
+                  <a href="{{route('createContact')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Create Contact') }}">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                   </a>
                 </div>
diff --git a/cp/resources/views/admin/domains/createDomain.twig b/cp/resources/views/admin/domains/createDomain.twig
index da40a1d..8208d70 100644
--- a/cp/resources/views/admin/domains/createDomain.twig
+++ b/cp/resources/views/admin/domains/createDomain.twig
@@ -92,7 +92,7 @@
 
                             <!-- Fields for nameservers -->
                             <div id="nameserverFields">
-                                <label class="form-label">{{ __('Nameservers') }}</label>
+                                <label class="form-label">{{ __('Nameservers') }}                             <button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button> <button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button></label>
 
                                 <div class="nameserver-group mb-1 row">
                                     <div class="col-md-4">
@@ -118,11 +118,9 @@
                                     </div>
                                 </div>
                             </div>
-                            <button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button>
-                            <button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button>
 
                             <!-- DNSSEC Data with checkbox -->
-                            <div class="mb-3 form-check">
+                            <div class="mb-3 mt-2 form-check">
                                 <input type="checkbox" class="form-check-input" id="addDnssec" name="addDnssec">
                                 <label class="form-check-label" for="addDnssec">{{ __('Add DNSSEC Data') }}</label>
                             </div>
diff --git a/cp/resources/views/admin/hosts/create.twig b/cp/resources/views/admin/hosts/createHost.twig
similarity index 100%
rename from cp/resources/views/admin/hosts/create.twig
rename to cp/resources/views/admin/hosts/createHost.twig
diff --git a/cp/resources/views/admin/hosts/view.twig b/cp/resources/views/admin/hosts/listHosts.twig
similarity index 97%
rename from cp/resources/views/admin/hosts/view.twig
rename to cp/resources/views/admin/hosts/listHosts.twig
index 816e0ca..71ce202 100644
--- a/cp/resources/views/admin/hosts/view.twig
+++ b/cp/resources/views/admin/hosts/listHosts.twig
@@ -20,11 +20,11 @@
               <!-- Page title actions -->
               <div class="col-auto ms-auto d-print-none">
                 <div class="btn-list">
-                  <a href="{{route('hostcreate')}}" class="btn btn-primary d-none d-sm-inline-block">
+                  <a href="{{route('createHost')}}" class="btn btn-primary d-none d-sm-inline-block">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                     {{ __('Create Host') }}
                   </a>
-                  <a href="{{route('hostcreate')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Create Host') }}">
+                  <a href="{{route('createHost')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Create Host') }}">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                   </a>
                 </div>
diff --git a/cp/resources/views/layouts/app.twig b/cp/resources/views/layouts/app.twig
index c8db349..99ed8eb 100644
--- a/cp/resources/views/layouts/app.twig
+++ b/cp/resources/views/layouts/app.twig
@@ -110,7 +110,7 @@
                     </a>
                   </div>
                 </li>
-                <li {{ is_current_url('contacts') or is_current_url('contactcreate') or 'contact' in currentUri ? 'class="nav-item dropdown active"' : 'class="nav-item dropdown"' }}>
+                <li {{ is_current_url('listContacts') or is_current_url('createContact') or 'contact' in currentUri ? 'class="nav-item dropdown active"' : 'class="nav-item dropdown"' }}>
                   <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z"></path><path d="M10 16h6"></path><path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M4 8h3"></path><path d="M4 12h3"></path><path d="M4 16h3"></path></svg>
                     </span>
@@ -119,15 +119,15 @@
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="{{route('contacts')}}">
+                    <a class="dropdown-item" href="{{route('listContacts')}}">
                       {{ __('List Contacts') }}
                     </a>
-                    <a class="dropdown-item" href="{{route('contactcreate')}}">
+                    <a class="dropdown-item" href="{{route('createContact')}}">
                       {{ __('Create Contact') }}
                     </a>
                   </div>
                 </li>
-                <li {{ is_current_url('hosts') or is_current_url('hostcreate') or 'host' in currentUri ? 'class="nav-item dropdown active"' : 'class="nav-item dropdown"' }}>
+                <li {{ is_current_url('listHosts') or is_current_url('createHost') or 'host' in currentUri ? 'class="nav-item dropdown active"' : 'class="nav-item dropdown"' }}>
                   <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
                     <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0"></path><path d="M12 3c1.333 .333 2 2.333 2 6s-.667 5.667 -2 6"></path><path d="M12 3c-1.333 .333 -2 2.333 -2 6s.667 5.667 2 6"></path><path d="M6 9h12"></path><path d="M3 19h7"></path><path d="M14 19h7"></path><path d="M12 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M12 15v2"></path></svg>
                     </span>
@@ -136,10 +136,10 @@
                     </span>
                   </a>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" href="{{route('hosts')}}">
+                    <a class="dropdown-item" href="{{route('listHosts')}}">
                       {{ __('List Hosts') }}
                     </a>
-                    <a class="dropdown-item" href="{{route('hostcreate')}}">
+                    <a class="dropdown-item" href="{{route('createHost')}}">
                       {{ __('Create Host') }}
                     </a>
                   </div>
diff --git a/cp/resources/views/partials/js-contacts.twig b/cp/resources/views/partials/js-contacts.twig
index 663daa8..5d2a4ca 100644
--- a/cp/resources/views/partials/js-contacts.twig
+++ b/cp/resources/views/partials/js-contacts.twig
@@ -6,10 +6,7 @@
 <script>
     var table;
     document.querySelector("#contactTable").addEventListener('click', function(e) {
-        if (e.target.matches('.update-btn')) {
-            let id = e.target.getAttribute('data-id');
-            updateRecord(id);
-        } else if (e.target.matches('.delete-btn')) {
+        if (e.target.matches('.delete-btn')) {
             let id = e.target.getAttribute('data-id');
             deleteRecord(id);
         }
@@ -23,26 +20,77 @@
    
     function actionsFormatter(cell, formatterParams, onRendered) {
         return `
-            <button class="btn btn-primary btn-icon update-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></button>
+            <a class="btn btn-primary btn-icon update-btn" href="contact/update/${cell.getRow().getData().identifier}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></a>
             <button class="btn btn-danger btn-icon delete-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7h16"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path><path d="M10 12l4 4m0 -4l-4 4"></path></svg></button>
         `;
     }
 
     function statusFormatter(cell) {
         var statusArray = cell.getValue();
-        if (statusArray && Array.isArray(statusArray)) {
-            return statusArray.map(item => item.status).join(', ');
+        var rowData = cell.getRow().getData(); // Get the entire row data
+
+        // Function to create a badge
+        function createBadge(text, badgeClass) {
+            return `<span class="badge bg-${badgeClass}-lt">${text}</span>`;
         }
-        return "";
+
+        // Check if statusArray is empty or not
+        if (statusArray && Array.isArray(statusArray) && statusArray.length > 0) {
+            return statusArray.map(item => createBadge(item.status, 'azure')).join(' ');
+        } else {
+            // Fallback to rgpstatus column if statusArray is empty
+            return rowData.rgpstatus ? createBadge(rowData.rgpstatus, 'lime') : "";
+        }
+    }
+    
+    var searchTerm = ""; // global variable to hold the search term
+
+    function updateSearchTerm(term) {
+        searchTerm = term;
+        table.replaceData();
     }
 
     table = new Tabulator("#contactTable", {
-        ajaxURL:"/api/records/contact?join=contact_status", // Set the URL for your JSON data
-        ajaxConfig:"GET",
-        pagination:"local",
-        paginationSize:10,
-        ajaxResponse:function(url, params, response){
-            return response.records;
+        pagination: true,
+        paginationMode: "remote",
+        paginationSize: 10,
+        ajaxURL: "/api/records/contact",
+        ajaxParams: {
+            join: "contact_status"
+        },
+        ajaxURLGenerator: function(url, config, params) {
+            var queryParts = ["join=contact_status"];
+
+            // Handle search term
+            if (searchTerm) {
+                queryParts.push("filter1=identifier,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter2=email,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter3=voice,cs," + encodeURIComponent(searchTerm));
+            }
+
+            queryParts.push("order=id");
+
+            // 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",
@@ -50,10 +98,10 @@
         resizableColumns:false,
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"Identifier", field:"identifier", width:200, headerSort:true, formatter: contactLinkFormatter, responsive:0},
-            {title:"Email", field:"email", width:300, minWidth:200, headerSort:true, responsive:2},
-            {title:"Phone", field:"voice", width:300, minWidth:200, headerSort:true, responsive:2},
-            {title:"Status", field:"contact_status", width:300, minWidth:200, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"Identifier", field:"identifier", width:250, headerSort:false, formatter: contactLinkFormatter, responsive:0},
+            {title:"Email", field:"email", width:300, minWidth:200, headerSort:false, responsive:2},
+            {title:"Phone", field:"voice", width:300, minWidth:200, headerSort:false, responsive:2},
+            {title:"Status", field:"contact_status", width:200, minWidth:100, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
             {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
         placeholder:function(){
@@ -62,27 +110,10 @@
     });
     var searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function () {
-        var term = searchInput.value.toLowerCase();
-
-        if (term) { // Only apply filter when there's a term to search for
-            table.setFilter(function (data) {
-                return (
-                    String(data.identifier).toLowerCase().includes(term) ||
-                    String(data.email).toLowerCase().includes(term) ||
-                    String(data.voice).toLowerCase().includes(term) ||
-                    String(data.contact_status).toLowerCase().includes(term)
-                );
-            });
-        } else {
-            table.clearFilter(); // Clear the filter when the search box is emptied
-        }
+        updateSearchTerm(searchInput.value);
     });
     });
    
-    function updateRecord(id) {
-        console.log("Updating record with ID: " + id);
-    }
-   
     function deleteRecord(id) {
         console.log("Deleting record with ID: " + id);
     }
diff --git a/cp/resources/views/partials/js-domains.twig b/cp/resources/views/partials/js-domains.twig
index 98766dc..6c44ae7 100644
--- a/cp/resources/views/partials/js-domains.twig
+++ b/cp/resources/views/partials/js-domains.twig
@@ -20,8 +20,8 @@
    
     function actionsFormatter(cell, formatterParams, onRendered) {
         return `
-            <a class="btn btn-primary btn-icon update-btn" href="domain/update/${cell.getRow().getData().name}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></a>
-            <a class="btn btn-secondary btn-icon renew-btn" href="domain/renew/${cell.getRow().getData().name}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg></a>
+            <a class="btn btn-primary btn-icon" href="domain/update/${cell.getRow().getData().name}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></a>
+            <a class="btn btn-secondary btn-icon" href="domain/renew/${cell.getRow().getData().name}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg></a>
             <button class="btn btn-danger btn-icon delete-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7h16"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path><path d="M10 12l4 4m0 -4l-4 4"></path></svg></button>
         `;
     }
@@ -102,9 +102,9 @@
             {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:"Registrant", width:200, field:"registrant.identifier", headerSort:false, responsive:2},
-            {title:"Creation Date", width:200, field:"crdate", headerSort:false, responsive:2},
-            {title:"Expiration Date", width:250, field:"exdate", headerSort:false, responsive:2},
-            {title:"Status", width:200, field:"domain_status", formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title:"Creation Date", width:250, minWidth:150, field:"crdate", headerSort:false, responsive:2},
+            {title:"Expiration Date", width:250, minWidth:150, field:"exdate", headerSort:false, responsive:2},
+            {title:"Status", width:150, field:"domain_status", formatter: statusFormatter, headerSort:false, download:false, responsive:2},
             {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
         placeholder:function(){
@@ -117,18 +117,10 @@
     });
     });
    
-    function updateRecord(id) {
-        console.log("Updating record with ID: " + id);
-    }
-   
     function deleteRecord(id) {
         console.log("Deleting record with ID: " + id);
     }
    
-    function renewDomain(id) {
-        console.log("Renewing domain with ID: " + id);
-    }
-   
     function downloadCSV() {
         table.download("csv", "data.csv");
     }
diff --git a/cp/resources/views/partials/js-hosts.twig b/cp/resources/views/partials/js-hosts.twig
index c95b72a..696e6f7 100644
--- a/cp/resources/views/partials/js-hosts.twig
+++ b/cp/resources/views/partials/js-hosts.twig
@@ -6,10 +6,7 @@
 <script>
     var table;
     document.querySelector("#hostTable").addEventListener('click', function(e) {
-        if (e.target.matches('.update-btn')) {
-            let id = e.target.getAttribute('data-id');
-            updateRecord(id);
-        } else if (e.target.matches('.delete-btn')) {
+        if (e.target.matches('.delete-btn')) {
             let id = e.target.getAttribute('data-id');
             deleteRecord(id);
         }
@@ -23,26 +20,76 @@
    
     function actionsFormatter(cell, formatterParams, onRendered) {
         return `
-            <button class="btn btn-primary btn-icon update-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></button>
+            <a class="btn btn-primary btn-icon update-btn" href="host/update/${cell.getRow().getData().name}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></a>
             <button class="btn btn-danger btn-icon delete-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7h16"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path><path d="M10 12l4 4m0 -4l-4 4"></path></svg></button>
         `;
     }
 
     function statusFormatter(cell) {
         var statusArray = cell.getValue();
-        if (statusArray && Array.isArray(statusArray)) {
-            return statusArray.map(item => item.status).join(', ');
+        var rowData = cell.getRow().getData(); // Get the entire row data
+
+        // Function to create a badge
+        function createBadge(text, badgeClass) {
+            return `<span class="badge bg-${badgeClass}-lt">${text}</span>`;
         }
-        return "";
+
+        // Check if statusArray is empty or not
+        if (statusArray && Array.isArray(statusArray) && statusArray.length > 0) {
+            return statusArray.map(item => createBadge(item.status, 'azure')).join(' ');
+        } else {
+            // Fallback to rgpstatus column if statusArray is empty
+            return rowData.rgpstatus ? createBadge(rowData.rgpstatus, 'lime') : "";
+        }
+    }
+    
+    var searchTerm = ""; // global variable to hold the search term
+
+    function updateSearchTerm(term) {
+        searchTerm = term;
+        table.replaceData();
     }
 
     table = new Tabulator("#hostTable", {
-        ajaxURL:"/api/records/host?join=host_status", // Set the URL for your JSON data
-        ajaxConfig:"GET",
-        pagination:"local",
-        paginationSize:10,
-        ajaxResponse:function(url, params, response){
-            return response.records;
+        pagination: true,
+        paginationMode: "remote",
+        paginationSize: 10,
+        ajaxURL: "/api/records/host",
+        ajaxParams: {
+            join: "host_status"
+        },
+        ajaxURLGenerator: function(url, config, params) {
+            var queryParts = ["join=host_status"];
+
+            // Handle search term
+            if (searchTerm) {
+                queryParts.push("filter1=name,cs," + encodeURIComponent(searchTerm));
+                queryParts.push("filter2=crdate,cs," + encodeURIComponent(searchTerm));
+            }
+
+            queryParts.push("order=id");
+
+            // 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",
@@ -50,8 +97,8 @@
         resizableColumns:false,
         columns:[
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
-            {title:"Name", field:"name", width:200, headerSort:true, formatter: hostLinkFormatter, responsive:0},
-            {title:"Creation Date", field:"crdate", width:300, minWidth:200, headerSort:true, responsive:2},
+            {title:"Name", field:"name", width:300, headerSort:false, formatter: hostLinkFormatter, responsive:0},
+            {title:"Creation Date", field:"crdate", width:300, minWidth:200, headerSort:false, responsive:2},
             {title:"Status", field:"host_status", width:300, minWidth:200, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
             {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
@@ -61,26 +108,10 @@
     });
     var searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function () {
-        var term = searchInput.value.toLowerCase();
-
-        if (term) { // Only apply filter when there's a term to search for
-            table.setFilter(function (data) {
-                return (
-                    String(data.name).toLowerCase().includes(term) ||
-                    String(data.crdate).toLowerCase().includes(term) ||
-                    String(data.host_status).toLowerCase().includes(term)
-                );
-            });
-        } else {
-            table.clearFilter(); // Clear the filter when the search box is emptied
-        }
+        updateSearchTerm(searchInput.value);
     });
     });
-   
-    function updateRecord(id) {
-        console.log("Updating record with ID: " + id);
-    }
-   
+    
     function deleteRecord(id) {
         console.log("Deleting record with ID: " + id);
     }
diff --git a/cp/routes/web.php b/cp/routes/web.php
index 45d91ae..ba5b45a 100644
--- a/cp/routes/web.php
+++ b/cp/routes/web.php
@@ -40,7 +40,8 @@ $app->group('', function ($route) {
     $route->map(['GET', 'POST'], '/domain/check', DomainsController::class . ':checkDomain')->setName('checkDomain');
     $route->map(['GET', 'POST'], '/domain/create', DomainsController::class . ':createDomain')->setName('createDomain');
     $route->get('/domain/view/{domain}', DomainsController::class . ':viewDomain')->setName('viewDomain');
-    $route->map(['GET', 'POST'], '/domain/update/{domain}', DomainsController::class . ':updateDomain')->setName('updateDomain');
+    $route->get('/domain/update/{domain}', DomainsController::class . ':updateDomain')->setName('updateDomain');
+    $route->post('/domain/update', DomainsController::class . ':updateDomainProcess')->setName('updateDomainProcess');
     $route->map(['GET', 'POST'], '/domain/renew/{domain}', DomainsController::class . ':renewDomain')->setName('renewDomain');
     $route->map(['GET', 'POST'], '/domain/delete/{domain}', DomainsController::class . ':deleteDomain')->setName('deleteDomain');
     
@@ -50,13 +51,19 @@ $app->group('', function ($route) {
     $route->post('/transfer/reject', DomainsController::class . ':rejectTransfer')->setName('rejectTransfer');
     $route->post('/transfer/cancel', DomainsController::class . ':cancelTransfer')->setName('cancelTransfer');
 
-    $route->get('/contacts', ContactsController::class .':view')->setName('contacts');
-    $route->map(['GET', 'POST'], '/contact/create', ContactsController::class . ':create')->setName('contactcreate');
+    $route->get('/contacts', ContactsController::class .':listContacts')->setName('listContacts');
+    $route->map(['GET', 'POST'], '/contact/create', ContactsController::class . ':createContact')->setName('createContact');
     $route->get('/contact/view/{contact}', ContactsController::class . ':viewContact')->setName('viewContact');
+    $route->get('/contact/update/{contact}', ContactsController::class . ':updateContact')->setName('updateContact');
+    $route->post('/contact/update', ContactsController::class . ':updateContactProcess')->setName('updateContactProcess');
+    $route->map(['GET', 'POST'], '/contact/delete/{contact}', ContactsController::class . ':deleteContact')->setName('deleteContact');
     
-    $route->get('/hosts', HostsController::class .':view')->setName('hosts');
-    $route->map(['GET', 'POST'], '/host/create', HostsController::class . ':create')->setName('hostcreate');
+    $route->get('/hosts', HostsController::class .':listHosts')->setName('listHosts');
+    $route->map(['GET', 'POST'], '/host/create', HostsController::class . ':createHost')->setName('createHost');
     $route->get('/host/view/{host}', HostsController::class . ':viewHost')->setName('viewHost');
+    $route->get('/host/update/{host}', HostsController::class . ':updateHost')->setName('updateHost');
+    $route->post('/host/update', HostsController::class . ':updateHostProcess')->setName('updateHostProcess');
+    $route->map(['GET', 'POST'], '/host/delete/{host}', HostsController::class . ':deleteHost')->setName('deleteHost');
 
     $route->get('/registrars', RegistrarsController::class .':view')->setName('registrars');
     $route->map(['GET', 'POST'], '/registrar/create', RegistrarsController::class . ':create')->setName('registrarcreate');