feat: add v2 dashboards and server-side request pagination

Introduces v2 role routes/views and moves request list filtering, sorting, and pagination to the backend for better performance. Also switches shared pages to a generated Tailwind CSS bundle with supporting npm assets.

.gitignore

@@ -123,4 +123,5 @@ _modules/*
 .vscode/
 
 /results/
-/phpunit*.xml
+/phpunit*.xml
+node_modules/

app/Config/Routes.php

@@ -69,6 +69,7 @@ $routes->group('api', function ($routes) {
 
 $routes->group('superuser', ['filter' => 'role:0'], function ($routes) {
     $routes->get('', 'Pages\SuperuserController::index');
+    $routes->get('v2', 'Pages\SuperuserController::indexV2');
     $routes->get('users', 'Pages\SuperuserController::users');
     $routes->get('validate', 'Pages\SuperuserController::validatePage');
     $routes->get('pdf-batch', 'Pages\SuperuserController::pdfBatch');
@@ -80,23 +81,27 @@ $routes->group('api', ['filter' => 'role:0'], function ($routes) {
 
 $routes->group('admin', ['filter' => 'role:1'], function ($routes) {
     $routes->get('', 'Pages\AdminController::index');
+    $routes->get('v2', 'Pages\AdminController::indexV2');
     $routes->get('users', 'Pages\AdminController::users');
     $routes->get('validate', 'Pages\AdminController::validationPage');
 });
 
 $routes->group('lab', ['filter' => 'role:2'], function ($routes) {
     $routes->get('', 'Pages\LabController::index');
+    $routes->get('v2', 'Pages\LabController::indexV2');
     $routes->get('validate', 'Pages\LabController::validationPage');
 });
 
 $routes->group('phlebo', ['filter' => 'role:3'], function ($routes) {
     $routes->get('', 'Pages\PhlebotomistController::collect');
     $routes->get('dashboard', 'Pages\PhlebotomistController::index');
+    $routes->get('v2', 'Pages\PhlebotomistController::indexV2');
     $routes->get('collect', 'Pages\PhlebotomistController::collect');
 });
 
 $routes->group('cs', ['filter' => 'role:4'], function ($routes) {
     $routes->get('', 'Pages\CsController::index');
+    $routes->get('v2', 'Pages\CsController::indexV2');
 });
 
 $routes->get('/dummypage', 'Home::dummyPage');

app/Controllers/Pages/AdminController.php

@@ -18,6 +18,12 @@ class AdminController extends BaseController
         return view('admin/index', ['roleConfig' => $config['admin']]);
     }
 
+    public function indexV2()
+    {
+        $config = require APPPATH . 'Views/shared/config.php';
+        return view('v2/admin/index', ['roleConfig' => $config['admin']]);
+    }
+
     public function users()
     {
         $config = require APPPATH . 'Views/shared/config.php';

app/Controllers/Pages/CsController.php

@@ -18,4 +18,10 @@ class CsController extends BaseController
 		return view('cs/index', ['roleConfig' => $config['cs']]);
 	}
 
+	public function indexV2()
+	{
+		$config = require APPPATH . 'Views/shared/config.php';
+		return view('v2/cs/index', ['roleConfig' => $config['cs']]);
+	}
+
 }

app/Controllers/Pages/LabController.php

@@ -18,6 +18,12 @@ class LabController extends BaseController
 		return view('lab/index', ['roleConfig' => $config['lab']]);
 	}
 
+	public function indexV2()
+	{
+		$config = require APPPATH . 'Views/shared/config.php';
+		return view('v2/lab/index', ['roleConfig' => $config['lab']]);
+	}
+
 	public function validationPage()
 	{
 		$config = require APPPATH . 'Views/shared/config.php';

app/Controllers/Pages/PhlebotomistController.php

@@ -18,6 +18,12 @@ class PhlebotomistController extends BaseController
         return view('phlebo/index', ['roleConfig' => $config['phlebo']]);
     }
 
+    public function indexV2()
+    {
+        $config = require APPPATH . 'Views/shared/config.php';
+        return view('v2/phlebo/index', ['roleConfig' => $config['phlebo']]);
+    }
+
 
     public function collect()
 {

app/Controllers/Pages/SuperuserController.php

@@ -18,6 +18,12 @@ class SuperuserController extends BaseController
         return view('superuser/index', ['roleConfig' => $config['superuser']]);
     }
 
+    public function indexV2()
+    {
+        $config = require APPPATH . 'Views/shared/config.php';
+        return view('v2/superuser/index', ['roleConfig' => $config['superuser']]);
+    }
+
     public function users()
     {
         $config = require APPPATH . 'Views/shared/config.php';

app/Controllers/RequestsController.php

@@ -7,38 +7,169 @@ class RequestsController extends BaseController
 {
   use ResponseTrait;
 
+  private const MAX_PAGE_SIZE = 100;
+
   public function index()
   {
     $db = \Config\Database::connect();
-    $date1 = $this->request->getGet('date1');
-    $date2 = $this->request->getGet('date2');
-    $userroleid = session()->get('userroleid');
+    $today = date('Y-m-d');
+    $date1 = (string) ($this->request->getGet('date1') ?: $today);
+    $date2 = (string) ($this->request->getGet('date2') ?: $today);
+    $userroleid = (int) session()->get('userroleid');
 
-    // Only allow Lab role (role 2)
-    if ($userroleid == 2) {
-      $sql = "SELECT d.*, r.REPORT_LANG, r.ISPDF from GDC_CMOD.dbo.V_DASHBOARD_DEV d
-        LEFT JOIN GDC_CMOD.dbo.CM_REQUESTS r ON r.ACCESSNUMBER=d.SP_ACCESSNUMBER
-        where d.COLLECTIONDATE between '$date1 00:00' and '$date2 23:59'
-        and d.ODR_DDATE between '$date1 00:00' and '$date2 23:59'
-        and (d.TESTS IS NOT NULL AND d.TESTS like '%[A-Za-z]%')";
-    } else {
-      $sql = "SELECT d.*, r.REPORT_LANG, r.ISPDF from GDC_CMOD.dbo.V_DASHBOARD_DEV d
-        LEFT JOIN GDC_CMOD.dbo.CM_REQUESTS r ON r.ACCESSNUMBER=d.SP_ACCESSNUMBER
-        where d.COLLECTIONDATE between '$date1 00:00' and '$date2 23:59'
-        and d.ODR_DDATE between '$date1 00:00' and '$date2 23:59'";
-    }
+    $page = max(1, (int) ($this->request->getGet('page') ?? 1));
+    $pageSize = (int) ($this->request->getGet('pageSize') ?? 50);
+    $pageSize = max(1, min(self::MAX_PAGE_SIZE, $pageSize));
+    $offset = ($page - 1) * $pageSize;
+
+    $sortCol = (string) ($this->request->getGet('sortCol') ?? 'REQDATE');
+    $sortDirRaw = strtoupper((string) ($this->request->getGet('sortDir') ?? 'DESC'));
+    $sortDir = $sortDirRaw === 'ASC' ? 'ASC' : 'DESC';
+    $sortSql = $this->resolveSortColumn($sortCol);
+
+    $filterKey = (string) ($this->request->getGet('filterKey') ?? 'Total');
+    $search = trim((string) ($this->request->getGet('search') ?? ''));
+
+    [$baseWhereSql, $baseParams] = $this->buildBaseWhereClause($date1, $date2, $userroleid);
+    [$whereSql, $whereParams] = $this->buildDashboardWhereClause($baseWhereSql, $baseParams, $filterKey, $search);
+
+    $rowsSql = "SELECT
+        d.REQDATE,
+        d.[Name],
+        d.SP_ACCESSNUMBER,
+        d.HOSTORDERNUMBER,
+        d.REFF,
+        d.DOC,
+        d.TESTS,
+        d.ODR_CRESULT_TO,
+        d.STATS,
+        d.COLLECTIONDATE,
+        d.[Name] AS PATNAME,
+        CAST(NULL AS VARCHAR(32)) AS PATNUMBER,
+        r.VAL1USER,
+        r.VAL2USER,
+        r.ISPENDING,
+        r.REPORT_LANG,
+        r.ISPDF
+      FROM GDC_CMOD.dbo.V_DASHBOARD_DEV d
+      LEFT JOIN GDC_CMOD.dbo.CM_REQUESTS r ON r.ACCESSNUMBER = d.SP_ACCESSNUMBER
+      WHERE {$whereSql}
+      ORDER BY {$sortSql} {$sortDir}
+      OFFSET ? ROWS FETCH NEXT ? ROWS ONLY";
+
+    $rowsParams = [...$whereParams, $offset, $pageSize];
+    $rows = $db->query($rowsSql, $rowsParams)->getResultArray();
+
+    $countSql = "SELECT COUNT(1) AS total
+      FROM GDC_CMOD.dbo.V_DASHBOARD_DEV d
+      LEFT JOIN GDC_CMOD.dbo.CM_REQUESTS r ON r.ACCESSNUMBER = d.SP_ACCESSNUMBER
+      WHERE {$whereSql}";
+    $countRow = $db->query($countSql, $whereParams)->getRowArray();
+    $totalRows = (int) ($countRow['total'] ?? 0);
+
+    $counterSql = "SELECT
+        SUM(CASE WHEN d.STATS = 'Pend' THEN 1 ELSE 0 END) AS Pend,
+        SUM(CASE WHEN d.STATS IN ('Coll', 'PartColl') THEN 1 ELSE 0 END) AS Coll,
+        SUM(CASE WHEN d.STATS IN ('Recv', 'PartRecv') THEN 1 ELSE 0 END) AS Recv,
+        SUM(CASE WHEN d.STATS = 'Inc' THEN 1 ELSE 0 END) AS Inc,
+        SUM(CASE WHEN d.STATS = 'Fin' THEN 1 ELSE 0 END) AS Fin,
+        COUNT(1) AS Total,
+        SUM(CASE WHEN r.VAL1USER IS NOT NULL AND r.VAL2USER IS NOT NULL AND ISNULL(r.ISPENDING, 0) <> 1 THEN 1 ELSE 0 END) AS Validated
+      FROM GDC_CMOD.dbo.V_DASHBOARD_DEV d
+      LEFT JOIN GDC_CMOD.dbo.CM_REQUESTS r ON r.ACCESSNUMBER = d.SP_ACCESSNUMBER
+      WHERE {$baseWhereSql}";
+    $counterRow = $db->query($counterSql, $baseParams)->getRowArray() ?? [];
 
-    $rows = $db->query($sql)->getResultArray();
     foreach ($rows as &$row) {
       $row['COLLECTIONDATE'] = date('Y-m-d H:i', strtotime($row['COLLECTIONDATE']));
-      $row['ODR_DDATE'] = date('Y-m-d H:i', strtotime($row['ODR_DDATE']));
       $row['REQDATE'] = date('Y-m-d H:i', strtotime($row['REQDATE']));
       $this->normalizeTelephoneFields($row);
     }
-    $data['data'] = $rows;
+
+    $data = [
+      'data' => $rows,
+      'pagination' => [
+        'page' => $page,
+        'pageSize' => $pageSize,
+        'totalRows' => $totalRows,
+        'totalPages' => max(1, (int) ceil($totalRows / $pageSize)),
+      ],
+      'counters' => [
+        'Pend' => (int) ($counterRow['Pend'] ?? 0),
+        'Coll' => (int) ($counterRow['Coll'] ?? 0),
+        'Recv' => (int) ($counterRow['Recv'] ?? 0),
+        'Inc' => (int) ($counterRow['Inc'] ?? 0),
+        'Fin' => (int) ($counterRow['Fin'] ?? 0),
+        'Total' => (int) ($counterRow['Total'] ?? 0),
+      ],
+      'validatedCount' => (int) ($counterRow['Validated'] ?? 0),
+    ];
+
     return $this->response->setJSON($data);
   }
 
+  private function buildBaseWhereClause(string $date1, string $date2, int $userroleid): array
+  {
+    $where = [
+      'd.COLLECTIONDATE BETWEEN ? AND ?',
+      'd.ODR_DDATE BETWEEN ? AND ?',
+    ];
+    $params = [
+      $date1 . ' 00:00',
+      $date2 . ' 23:59',
+      $date1 . ' 00:00',
+      $date2 . ' 23:59',
+    ];
+
+    if ($userroleid === 2) {
+      $where[] = "(d.TESTS IS NOT NULL AND d.TESTS LIKE '%[A-Za-z]%')";
+    }
+
+    return [implode(' AND ', $where), $params];
+  }
+
+  private function buildDashboardWhereClause(string $baseWhereSql, array $baseParams, string $filterKey, string $search): array
+  {
+    $where = [$baseWhereSql];
+    $params = $baseParams;
+
+    $statusClauses = [
+      'Pend' => "d.STATS = 'Pend'",
+      'Coll' => "d.STATS IN ('Coll', 'PartColl')",
+      'Recv' => "d.STATS IN ('Recv', 'PartRecv')",
+      'Inc' => "d.STATS = 'Inc'",
+      'Fin' => "d.STATS = 'Fin'",
+      'Validated' => 'r.VAL1USER IS NOT NULL AND r.VAL2USER IS NOT NULL AND ISNULL(r.ISPENDING, 0) <> 1',
+    ];
+
+    if (isset($statusClauses[$filterKey])) {
+      $where[] = $statusClauses[$filterKey];
+    }
+
+    if ($search !== '') {
+      $where[] = '(d.SP_ACCESSNUMBER LIKE ? OR d.HOSTORDERNUMBER LIKE ? OR d.[Name] LIKE ? OR d.REFF LIKE ? OR d.DOC LIKE ? OR d.TESTS LIKE ? OR d.ODR_CRESULT_TO LIKE ?)';
+      $like = '%' . $search . '%';
+      $params = [...$params, $like, $like, $like, $like, $like, $like, $like];
+    }
+
+    return [implode(' AND ', $where), $params];
+  }
+
+  private function resolveSortColumn(string $sortCol): string
+  {
+    $map = [
+      'REQDATE' => 'd.REQDATE',
+      'Name' => 'd.[Name]',
+      'SP_ACCESSNUMBER' => 'd.SP_ACCESSNUMBER',
+      'HOSTORDERNUMBER' => 'd.HOSTORDERNUMBER',
+      'REFF' => 'd.REFF',
+      'DOC' => 'd.DOC',
+      'STATS' => 'd.STATS',
+    ];
+
+    return $map[$sortCol] ?? 'd.REQDATE';
+  }
+
 
   public function show($accessnumber)
   {

app/Views/errors/notfound.php

@@ -5,9 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Not Found</title>
-    <link href="<?= base_url('css/daisyui.min.css'); ?>" rel="stylesheet" type="text/css" />
-    <script src="<?= base_url('css/tailwind.min.js'); ?>"></script>
-    <link href="<?= base_url('css/themes.min.css'); ?>" rel="stylesheet" type="text/css" />
+    <link href="<?= base_url('css/app.generated.css'); ?>" rel="stylesheet" type="text/css" />
     <script src="<?= base_url('js/fontawesome.min.js'); ?>"></script>
     <style>
         body {
@@ -35,4 +33,4 @@
     </div>
 </body>
 
-</html>
+</html>

app/Views/errors/unauthorized.php

@@ -5,9 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unauthorized</title>
-    <link href="<?= base_url('css/daisyui.min.css'); ?>" rel="stylesheet" type="text/css" />
-    <script src="<?= base_url('css/tailwind.min.js'); ?>"></script>
-    <link href="<?= base_url('css/themes.min.css'); ?>" rel="stylesheet" type="text/css" />
+    <link href="<?= base_url('css/app.generated.css'); ?>" rel="stylesheet" type="text/css" />
     <script src="<?= base_url('js/fontawesome.min.js'); ?>"></script>
     <style>
         body {
@@ -34,4 +32,4 @@
     </div>
 </body>
 
-</html>
+</html>

app/Views/login.php

@@ -5,9 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Login - CMOD</title>
-	<link href="<?= base_url('css/daisyui.min.css'); ?>" rel="stylesheet" type="text/css" />
-	<script src="<?= base_url('css/tailwind.min.js'); ?>"></script>
-	<link href="<?= base_url('css/themes.min.css'); ?>" rel="stylesheet" type="text/css" />
+	<link href="<?= base_url('css/app.generated.css'); ?>" rel="stylesheet" type="text/css" />
 	<script src="<?= base_url('js/fontawesome.min.js'); ?>"></script>
 </head>
 
@@ -54,4 +52,4 @@
 	</div>
 </body>
 
-</html>
+</html>

app/Views/shared/content_requests.php

@@ -74,7 +74,7 @@ $canUnval = $userLevel <= 1;
 				</div>
 
 				<div class="flex gap-2">
-					<button class="btn btn-sm btn-primary" @click='fetchList()'><i class='fa fa-search'></i> Search</button>
+					<button class="btn btn-sm btn-primary" @click='currentPage = 1; fetchList()'><i class='fa fa-search'></i> Search</button>
 					<button class="btn btn-sm btn-neutral" @click='reset()'><i class='fa fa-sync-alt'></i> Reset</button>
 				</div>
 
@@ -137,13 +137,13 @@ $canUnval = $userLevel <= 1;
 					</tbody>
 				</table>
 			</template>
-			<template x-if="!isLoading && !list.length">
+			<template x-if="!isLoading && !rows.length">
 				<div class="text-center py-10">
 					<i class="fa fa-inbox text-4xl mb-2 opacity-50"></i>
 					<p>No records found</p>
 				</div>
 			</template>
-			<template x-if="!isLoading && list.length">
+			<template x-if="!isLoading && rows.length">
 				<table class="table table-xs table-zebra w-full">
 					<thead class="bg-base-100 sticky top-0 z-10">
 						<tr>
@@ -204,7 +204,7 @@ $canUnval = $userLevel <= 1;
 						</tr>
 					</thead>
 					<tbody>
-						<template x-for="req in paginated" :key="req.SP_ACCESSNUMBER">
+					<template x-for="req in rows" :key="req.SP_ACCESSNUMBER">
 							<tr class="hover:bg-base-300">
 								<td x-text="req.REQDATE" :class="statusRowBg[req.STATS]"></td>
 								<td x-text="req.Name" :class="statusRowBg[req.STATS]"></td>
@@ -356,11 +356,11 @@ $canUnval = $userLevel <= 1;
 
 		<!-- Pagination Control -->
 		<div class="p-2 border-t border-base-200 bg-base-50 flex justify-between items-center"
-			x-show="!isLoading && list.length > 0">
+			x-show="!isLoading && totalRows > 0">
 			<div class="text-xs text-base-content/60">
 				Showing <span class="font-bold" x-text="((currentPage - 1) * pageSize) + 1"></span> to
-				<span class="font-bold" x-text="Math.min(currentPage * pageSize, filtered.length)"></span> of
-				<span class="font-bold" x-text="filtered.length"></span> entries
+				<span class="font-bold" x-text="Math.min(currentPage * pageSize, totalRows)"></span> of
+				<span class="font-bold" x-text="totalRows"></span> entries
 			</div>
 			<div class="join">
 				<button class="join-item btn btn-sm" @click="prevPage()" :disabled="currentPage === 1">
@@ -376,4 +376,4 @@ $canUnval = $userLevel <= 1;
 		</div>
 
 	</div>
-</div>
+</div>

app/Views/shared/layout.php

@@ -5,10 +5,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>CMOD</title>
-	<link href="<?= base_url('css/daisyui.min.css'); ?>" rel="stylesheet" type="text/css" />
-	<script src="<?= base_url('css/tailwind.min.js'); ?>"></script>
+	<link href="<?= base_url('css/app.generated.css'); ?>" rel="stylesheet" type="text/css" />
 	<script src="<?= base_url('js/alpine-focus.min.js'); ?>"></script>
-	<link href="<?= base_url('css/themes.min.css'); ?>" rel="stylesheet" type="text/css" />
 	<script src="<?= base_url('js/fontawesome.min.js'); ?>"></script>
 	<style>
 		body {
@@ -87,4 +85,4 @@
 	<?= $this->renderSection('script'); ?>
 </body>
 
-</html>
+</html>

app/Views/shared/script_requests.php

@@ -3,13 +3,16 @@ document.addEventListener('alpine:init', () => {
 		// dashboard
 		today: "",
 		filter: { date1: "", date2: "" },
-		list: [],
+		rows: [],
 		isLoading: false,
 		counters: { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 },
+		totalRows: 0,
 
 		// Toast queue to prevent DOM accumulation
 		_toastQueue: [],
 		_maxToasts: 3,
+		_abortController: null,
+		_fetchToken: 0,
 
 		selectedPrinter: localStorage.getItem('selectedPrinter') || 'zebracs2',
 		
@@ -42,28 +45,12 @@ document.addEventListener('alpine:init', () => {
 		},
 		filterTable: "",
 		filterKey: 'Total',
-		statusMap: {
-			Total: [],
-			Pend: ['Pend'],
-			Coll: ['Coll', 'PartColl'],
-			Recv: ['Recv', 'PartRecv'],
-			Inc: ['Inc'],
-			Fin: ['Fin'],
-		},
-
-		// Status order for sorting (Pend -> Coll -> Recv -> Inc -> Fin)
-		statusOrder: { Pend: 1, PartColl: 2, Coll: 3, PartRecv: 4, Recv: 5, Inc: 6, Fin: 7 },
 
 		// Sorting & Pagination
 		sortCol: 'REQDATE',
 		sortAsc: false,
 		currentPage: 1,
-		pageSize: 30,
-
-		// Cached computed properties to prevent memory leak
-		filtered: [],
-		sorted: [],
-		paginated: [],
+		pageSize: 50,
 		totalPages: 1,
 		validatedCount: 0,
 
@@ -74,88 +61,34 @@ document.addEventListener('alpine:init', () => {
 				this.sortCol = col;
 				this.sortAsc = true;
 			}
-			this.computeSorted();
-			this.computePaginated();
+			this.currentPage = 1;
+			this.fetchList();
 		},
 
 		nextPage() {
 			if (this.currentPage < this.totalPages) {
 				this.currentPage++;
-				this.computePaginated();
+				this.fetchList();
 			}
 		},
 
 		prevPage() {
 			if (this.currentPage > 1) {
 				this.currentPage--;
-				this.computePaginated();
+				this.fetchList();
 			}
 		},
 
 		setFilterKey(key) {
 			this.filterKey = key;
-			this.computeFiltered();
-			this.computeSorted();
-			this.computeTotalPages();
-			this.computePaginated();
+			this.currentPage = 1;
+			this.fetchList();
 		},
 
 		setFilterTable(value) {
 			this.filterTable = value;
 			this.currentPage = 1;
-			this.computeFiltered();
-			this.computeSorted();
-			this.computeTotalPages();
-			this.computePaginated();
-		},
-
-		// Compute methods - called only when dependencies change
-		computeFiltered() {
-			let filteredList = this.list;
-			if (this.filterKey === 'Validated') {
-				filteredList = filteredList.filter(item => this.isValidated(item));
-			} else {
-				const validStatuses = this.statusMap[this.filterKey];
-				if (validStatuses.length > 0) {
-					filteredList = filteredList.filter(item => validStatuses.includes(item.STATS));
-				}
-			}
-			if (this.filterTable) {
-				const searchTerm = this.filterTable.toLowerCase();
-				filteredList = filteredList.filter(item =>
-					Object.values(item).some(value =>
-						String(value).toLowerCase().includes(searchTerm)
-					)
-				);
-			}
-			this.filtered = filteredList;
-		},
-
-		computeSorted() {
-			this.sorted = this.filtered.slice().sort((a, b) => {
-				// First sort by status (Pend -> Coll -> Recv -> Inc -> Fin)
-				let statusA = this.statusOrder[a.STATS] ?? 0;
-				let statusB = this.statusOrder[b.STATS] ?? 0;
-				if (statusA !== statusB) {
-					return statusA - statusB;
-				}
-				
-				// Then sort by selected column
-				let modifier = this.sortAsc ? 1 : -1;
-				if (a[this.sortCol] < b[this.sortCol]) return -1 * modifier;
-				if (a[this.sortCol] > b[this.sortCol]) return 1 * modifier;
-				return 0;
-			});
-		},
-
-		computePaginated() {
-			const start = (this.currentPage - 1) * this.pageSize;
-			const end = start + this.pageSize;
-			this.paginated = this.sorted.slice(start, end);
-		},
-
-		computeTotalPages() {
-			this.totalPages = Math.ceil(this.filtered.length / this.pageSize) || 1;
+			this.fetchList();
 		},
 
 		init() {
@@ -170,49 +103,59 @@ document.addEventListener('alpine:init', () => {
 		},
 
 		fetchList() {
+			if (this._abortController) {
+				this._abortController.abort();
+			}
+
+			this._abortController = new AbortController();
+			const token = ++this._fetchToken;
 			this.isLoading = true;
-			this.list = [];
-			let param = new URLSearchParams(this.filter).toString();
-			for (let k in this.counters) { this.counters[k] = 0; }
+			this.rows = [];
+			const param = new URLSearchParams({
+				...this.filter,
+				page: String(this.currentPage),
+				pageSize: String(this.pageSize),
+				sortCol: this.sortCol,
+				sortDir: this.sortAsc ? 'ASC' : 'DESC',
+				filterKey: this.filterKey,
+				search: this.filterTable,
+			}).toString();
+
 			fetch(`${BASEURL}/api/requests?${param}`, {
 				method: 'GET',
 				headers: { 'Content-Type': 'application/json' },
+				signal: this._abortController.signal,
 			}).then(res => res.json()).then(data => {
-				this.list = data.data ?? [];
-				this.filterKey = 'Total';
-				this.list.forEach(item => {
-					if (this.counters[item.STATS] !== undefined) { this.counters[item.STATS]++; this.counters.Total++; }
-					else {
-						if (item.STATS == 'PartColl') { this.counters.Coll++; }
-						else if (item.STATS == 'PartRecv') { this.counters.Recv++; }
-						this.counters.Total++;
-					}
-				});
-				// Compute derived data after list is loaded
-				this.computeFiltered();
-				this.computeValidatedCount();
-				this.computeSorted();
-				this.computeTotalPages();
-				this.computePaginated();
+				if (token !== this._fetchToken) return;
+
+				this.rows = data.data ?? [];
+				this.counters = data.counters ?? { Pend: 0, Coll: 0, Recv: 0, Inc: 0, Fin: 0, Total: 0 };
+				this.validatedCount = Number(data.validatedCount ?? 0);
+				const pagination = data.pagination ?? {};
+				this.totalRows = Number(pagination.totalRows ?? 0);
+				this.totalPages = Number(pagination.totalPages ?? 1);
 			}).finally(() => {
+				if (token === this._fetchToken) {
+					this.isLoading = false;
+				}
+			}).catch(error => {
+				if (error && error.name === 'AbortError') return;
 				this.isLoading = false;
+				this.showToast('Failed to load requests', 'error');
 			});
 		},
 
 		reset() {
 			this.filter.date1 = this.today;
 			this.filter.date2 = this.today;
+			this.filterTable = '';
+			this.filterKey = 'Total';
+			this.currentPage = 1;
+			this.sortCol = 'REQDATE';
+			this.sortAsc = false;
 			this.fetchList();
 		},
 
-		isValidated(item) {
-			return item.VAL1USER && item.VAL2USER && item.ISPENDING != 1;
-		},
-
-		computeValidatedCount() {
-			this.validatedCount = this.list.filter(r => this.isValidated(r)).length;
-		},
-
 		/*
 		sample dialog
 		*/
@@ -634,15 +577,17 @@ document.addEventListener('alpine:init', () => {
 
 		destroy() {
 			// Clear large data arrays to free memory
-			this.list = [];
-			this.filtered = [];
-			this.sorted = [];
-			this.paginated = [];
+			this.rows = [];
+			this.totalRows = 0;
 			this.auditData = null;
 			this._cachedAuditEvents = [];
 			this.item = null;
 			this.previewItem = null;
 			this.engResultItem = null;
+			if (this._abortController) {
+				this._abortController.abort();
+				this._abortController = null;
+			}
 			// Clear any open dialogs and their iframe references
 			if (this.$refs.previewIframe) this.$refs.previewIframe.src = 'about:blank';
 			if (this.$refs.engResultIframe) this.$refs.engResultIframe.src = 'about:blank';

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "gdc_cmod-assets",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Static CSS build for Tailwind + DaisyUI",
+  "scripts": {
+    "css:build": "tailwindcss -i ./resources/css/app.css -o ./public/css/app.generated.css --minify",
+    "css:watch": "tailwindcss -i ./resources/css/app.css -o ./public/css/app.generated.css --watch"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "daisyui": "^5.4.5"
+  }
+}

resources/css/app.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: corporate --default;
+}
+
+@source "../../app/Views/**/*.php";
+@source "../../app/**/*.php";
+@source "../../public/js/**/*.js";