MokoSuiteClient/src/packages/com_mokowaas/admin/tmpl/database/default.php

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Router\Route;
use Joomla\CMS\Session\Session;

$data    = $this->tableData;
$tables  = $data['tables'] ?? [];
$token   = Session::getFormToken();
$optimizeUrl = Route::_('index.php?option=com_mokowaas&task=display.optimizeDb&format=json');
$repairUrl   = Route::_('index.php?option=com_mokowaas&task=display.repairDb&format=json');
$purgeUrl    = Route::_('index.php?option=com_mokowaas&task=display.purgeSessions&format=json');
?>

<div id="mokowaas-database">
	<div class="row g-3 mb-4">
		<div class="col-6 col-md-3"><div class="card text-center p-3"><span class="fw-bold fs-3"><?php echo $data['count']; ?></span><small class="text-muted">Tables</small></div></div>
		<div class="col-6 col-md-3"><div class="card text-center p-3"><span class="fw-bold fs-3"><?php echo $data['total_size_mb']; ?> MB</span><small class="text-muted">Total Size</small></div></div>
		<div class="col-6 col-md-3"><div class="card text-center p-3"><span class="fw-bold fs-3 <?php echo $data['total_overhead_kb'] > 100 ? 'text-warning' : 'text-success'; ?>"><?php echo $data['total_overhead_kb']; ?> KB</span><small class="text-muted">Overhead</small></div></div>
		<div class="col-6 col-md-3">
			<div class="card p-3 d-grid gap-2">
				<button type="button" class="btn btn-sm btn-primary btn-db-action" data-url="<?php echo $optimizeUrl; ?>" data-token="<?php echo $token; ?>" data-confirm="Optimize all tables with overhead?">
					<span class="icon-bolt"></span> Optimize All
				</button>
				<button type="button" class="btn btn-sm btn-outline-warning btn-db-action" data-url="<?php echo $repairUrl; ?>" data-token="<?php echo $token; ?>" data-confirm="Repair all tables?">
					<span class="icon-wrench"></span> Repair All
				</button>
				<button type="button" class="btn btn-sm btn-outline-secondary btn-db-action" data-url="<?php echo $purgeUrl; ?>" data-token="<?php echo $token; ?>" data-confirm="Purge expired sessions?">
					<span class="icon-trash"></span> Purge Sessions
				</button>
			</div>
		</div>
	</div>

	<div class="card">
		<div class="table-responsive">
			<table class="table table-striped table-sm mb-0">
				<thead><tr><th>Table</th><th>Engine</th><th class="text-end">Rows</th><th class="text-end">Size</th><th class="text-end">Overhead</th></tr></thead>
				<tbody>
				<?php foreach ($tables as $t): ?>
				<tr class="<?php echo $t->overhead_kb > 10 ? 'table-warning' : ''; ?> <?php echo $t->is_moko ? 'fw-bold' : ''; ?>">
					<td class="small"><?php echo htmlspecialchars($t->name); ?></td>
					<td class="small"><?php echo htmlspecialchars($t->engine); ?></td>
					<td class="text-end small"><?php echo number_format($t->rows); ?></td>
					<td class="text-end small"><?php echo $t->size_mb; ?> MB</td>
					<td class="text-end small <?php echo $t->overhead_kb > 10 ? 'text-warning fw-bold' : ''; ?>"><?php echo $t->overhead_kb > 0 ? $t->overhead_kb . ' KB' : '—'; ?></td>
				</tr>
				<?php endforeach; ?>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script>
document.querySelectorAll('.btn-db-action').forEach(function(btn) {
	btn.addEventListener('click', function() {
		if (!confirm(this.dataset.confirm)) return;
		var el = this;
		el.disabled = true;
		var fd = new FormData();
		fd.append(el.dataset.token, '1');
		fetch(el.dataset.url, {method:'POST', body:fd, headers:{'X-Requested-With':'XMLHttpRequest'}})
			.then(function(r){return r.json()})
			.then(function(d){
				if (d.success) { Joomla.renderMessages({message:[d.message]}); setTimeout(function(){location.reload()},1500); }
				else { Joomla.renderMessages({error:[d.message]}); el.disabled = false; }
			})
			.catch(function(){ el.disabled = false; });
	});
});
</script>