Initial works on domain list view in panel

cp/app/Controllers/DomainsController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Models\User;
+use Psr\Http\Message\ResponseInterface as Response;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Container\ContainerInterface;
+
+class DomainsController extends Controller
+{
+    public function view(Request $request, Response $response)
+    {
+        $userModel = new User($this->container->get('db'));
+        $users = $userModel->getAllUsers();
+        return view($response,'admin/domains/index.twig', compact('users'));
+    }
+	
+}

cp/resources/views/admin/domains/index.twig

@@ -0,0 +1,83 @@
+{% extends "layouts/app.twig" %}
+
+{% block title %}Domains{% endblock %}
+
+{% block content %}
+      <div class="page-wrapper">
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <!-- Page pre-title -->
+                <div class="page-pretitle">
+                  Overview
+                </div>
+                <h2 class="page-title">
+                  Domains
+                </h2>
+              </div>
+              <!-- Page title actions -->
+              <div class="col-auto ms-auto d-print-none">
+                <div class="btn-list">
+                  <span class="d-none d-sm-inline">
+                    <a href="#" class="btn">
+                      New view
+                    </a>
+                  </span>
+                  <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
+                    <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                    <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 new report
+                  </a>
+                  <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
+                    <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                    <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>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="card">
+              <div class="card-body">
+                <div id="table-default" class="table-responsive">
+                  <table id="domainTable" class="table">
+                    <thead>
+                      <tr>
+                        <th><button class="table-sort" data-sort="sort-id">ID</button></th>
+                        <th><button class="table-sort" data-sort="sort-name">Name</button></th>
+                        <th><button class="table-sort" data-sort="sort-crdate">Creation Date</button></th>
+                        <th><button class="table-sort" data-sort="sort-exdate">Expiration Date</button></th>
+                        <th><button class="table-sort" data-sort="sort-registrant">Registrant</button></th>
+                        <th><button class="table-sort" data-sort="sort-status">Status</button></th>
+                        <th>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody class="table-tbody">
+					    <!-- Rows will be added here dynamically -->
+                    </tbody>
+                  </table>
+                </div>
+			</div>
+		</div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2023
+                    <a href="https://namingo.org" target="_blank" class="link-secondary">Namingo</a>.
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+{% endblock %}

cp/resources/views/layouts/app.twig

@@ -153,13 +153,21 @@
           <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
-                <li class="nav-item active">
+                <li {{ is_current_url('home') ? 'class="nav-item active"' : 'class="nav-item"' }}>
                   <a class="nav-link" href="{{route('home')}}">
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                    <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="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M10 12h4v4h-4z"></path></svg>
-                      <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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                     </span>
                     <span class="nav-link-title">
-                      Home
+                      Dashboard
+                    </span>
+                  </a>
+                </li>
+                <li {{ is_current_url('domains') ? 'class="nav-item active"' : 'class="nav-item"' }}>
+                  <a class="nav-link" href="{{route('domains')}}">
+                    <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="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4"></path><path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4"></path><path d="M12.5 3a16.989 16.989 0 0 1 1.828 4"></path><path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4"></path><path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4"></path><path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4"></path><path d="M2 10l1 4l1.5 -4l1.5 4l1 -4"></path>   <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4"></path><path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4"></path></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Domains
                     </span>
                   </a>
                 </li>
@@ -277,6 +285,8 @@
     <!-- Libs JS -->
 {% if route_is('dashboard') %}
     {% include 'partials/js-dash.twig' %}
+{% elseif route_is('domains') %}
+    {% include 'partials/js-domains.twig' %}
 {% else %}
     {% include 'partials/js.twig' %}
 {% endif %}

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

@@ -0,0 +1,42 @@
+<script src="/assets/libs/list.js/dist/list.min.js" defer></script>
+<script src="/assets/js/tabler.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+  const list = new List('table-default', {
+  	sortClass: 'table-sort',
+  	listClass: 'table-tbody',
+  	valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
+  		{ attr: 'data-date', name: 'sort-date' },
+  		{ attr: 'data-progress', name: 'sort-progress' },
+  		'sort-quantity'
+  	]
+  });
+  })
+  
+fetch('/api/records/domain')
+    .then(response => response.json())
+    .then(data => {
+        if (data.records) {
+            populateTable(data.records);
+        }
+    });
+  
+function populateTable(records) {
+    const tableBody = document.getElementById('domainTable').querySelector('tbody');
+    records.forEach(domain => {
+        const row = tableBody.insertRow();
+        const cell1 = row.insertCell(0);
+        const cell2 = row.insertCell(1);
+        const cell3 = row.insertCell(2);
+        const cell4 = row.insertCell(3);
+        const cell5 = row.insertCell(4);
+        cell1.textContent = domain.id;
+        cell2.textContent = domain.name;
+		cell2.style.fontWeight = 'bold';
+        cell3.textContent = domain.crdate;
+        cell4.textContent = domain.exdate;
+        cell5.textContent = domain.registrant;
+    });
+}
+
+</script>

cp/routes/web.php

@@ -2,6 +2,7 @@
 use App\Controllers\Auth\AuthController;
 use App\Controllers\Auth\PasswordController;
 use App\Controllers\HomeController;
+use App\Controllers\DomainsController;
 use App\Controllers\ProfileController;
 use App\Middleware\AuthMiddleware;
 use App\Middleware\GuestMiddleware;
@@ -31,6 +32,7 @@ $app->group('', function ($route) {
 
 $app->group('', function ($route) {
     $route->get('/dashboard', HomeController::class .':dashboard')->setName('home');
+    $route->get('/domains', DomainsController::class .':view')->setName('domains');
     $route->get('/profile', ProfileController::class .':profile')->setName('profile');
     $route->get('/profile/notifications', ProfileController::class .':notifications')->setName('notifications');
     $route->get('/profile/security', ProfileController::class .':security')->setName('security');