From 82f6721d64300b923e8a654bcfca290be7a4e9f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Fri, 12 Jan 2024 15:59:16 -0500
Subject: [PATCH] refactor: search stats

---
 public/language/en-GB/admin/dashboard.json |  5 ++-
 public/src/admin/dashboard.js              | 22 +++---------
 src/views/admin/dashboard.tpl              | 40 ++++++++++++++++++----
 src/views/admin/dashboard/searches.tpl     |  8 ++---
 4 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/public/language/en-GB/admin/dashboard.json b/public/language/en-GB/admin/dashboard.json
index 681c202f47..6ad973f5f3 100644
--- a/public/language/en-GB/admin/dashboard.json
+++ b/public/language/en-GB/admin/dashboard.json
@@ -94,5 +94,8 @@
 	"view-as-json": "View as JSON",
 	"expand-analytics": "Expand analytics",
 	"clear-search-history": "Clear Search History",
-	"clear-search-history-confirm": "Are you sure you want to clear entire search history?"
+	"clear-search-history-confirm": "Are you sure you want to clear entire search history?",
+	"search-term": "Term",
+	"search-count": "Count",
+	"view-all": "View all"
 }
diff --git a/public/src/admin/dashboard.js b/public/src/admin/dashboard.js
index 9ec8db599a..138df28300 100644
--- a/public/src/admin/dashboard.js
+++ b/public/src/admin/dashboard.js
@@ -90,28 +90,14 @@ function updateRoomUsage(err, data) {
 
 	graphData.rooms = data;
 
-	const html = '<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.users]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineGuestCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.guests]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.total]]</div>' +
-				'</div>' +
-				'<div class="text-center">' +
-					'<span class="fs-5">' + formattedNumber(data.socketCount) + '</span>' +
-					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.connections]]</div>' +
-				'</div>';
-
 	updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount);
 	updatePresenceGraph(data.users);
 	updateTopicsGraph(data.topTenTopics);
 
-	$('#active-users').translateHtml(html);
+	$('#active-users-loggedin').text(formattedNumber(data.onlineRegisteredCount));
+	$('#active-users-guests').text(formattedNumber(data.onlineGuestCount));
+	$('#active-users-total').text(formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount));
+	$('#active-users-connections').text(formattedNumber(data.socketCount));
 }
 
 const graphs = {
diff --git a/src/views/admin/dashboard.tpl b/src/views/admin/dashboard.tpl
index d1189e66e2..355aedaba3 100644
--- a/src/views/admin/dashboard.tpl
+++ b/src/views/admin/dashboard.tpl
@@ -112,18 +112,44 @@
 		<div class="card mb-3">
 			<div class="card-header">[[admin/dashboard:active-users]]</div>
 			<div class="card-body">
-				<div id="active-users" class="stats row row-cols-2 row-cols-md-1 row-cols-lg-2"></div>
+				<div id="active-users" class="stats">
+					<table class="table table-sm text-sm">
+						<tbody>
+							<tr>
+								<td>[[admin/dashboard:active-users.users]]</td>
+								<td id="active-users-loggedin" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.guests]]</td>
+								<td id="active-users-guests" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.total]]</td>
+								<td id="active-users-total" class="text-end" style="width: 1px;"></td>
+							</tr>
+							<tr>
+								<td>[[admin/dashboard:active-users.connections]]</td>
+								<td id="active-users-connections" class="text-end" style="width: 1px;"></td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
 		</div>
 
 		<div class="card">
-			<div class="card-header">[[admin/dashboard:popular-searches]]</div>
+			<div class="card-header d-flex justify-content-between">[[admin/dashboard:popular-searches]] <a href="{config.relative_path}/admin/dashboard/searches" class="text-xs">[[admin/dashboard:view-all]]</a></div>
 			<div class="card-body">
-				<ul class="list-unstyled text-sm">
-					{{{ each popularSearches}}}
-					<li>({popularSearches.score}) {popularSearches.value}</li>
-					{{{ end }}}
-				</ul>
+				<table class="table table-sm text-sm search-list">
+					<tbody>
+						{{{ each popularSearches }}}
+						<tr>
+							<td>{popularSearches.value}</td>
+							<td class="text-end" style="width: 1px;">{formattedNumber(popularSearches.score)}</td>
+						</tr>
+						{{{ end }}}
+					</tbody>
+				</table>
 			</div>
 		</div>
 	</div>
diff --git a/src/views/admin/dashboard/searches.tpl b/src/views/admin/dashboard/searches.tpl
index c669c4eda4..118a016cdf 100644
--- a/src/views/admin/dashboard/searches.tpl
+++ b/src/views/admin/dashboard/searches.tpl
@@ -1,5 +1,5 @@
 <div class="row dashboard px-lg-4">
-	<div class="col-12">
+	<div class="col-8 mx-auto">
 		<div class="d-flex justify-content-between align-items-center mb-3">
 			<form class="d-flex flex-wrap gap-3 align-sm-items-center" method="GET">
 				<div class="d-flex align-items-center gap-2">
@@ -19,8 +19,8 @@
 
 		<table class="table table-sm text-sm search-list">
 			<thead>
-				<th class="text-end">Count</th>
-				<th>Term</th>
+				<th>[[admin/dashboard:search-term]]</th>
+				<th class="text-end">[[admin/dashboard:search-count]]</th>
 			</thead>
 			<tbody>
 				{{{ if !searches.length}}}
@@ -30,8 +30,8 @@
 				{{{ end }}}
 				{{{ each searches }}}
 				<tr>
+					<td>{searches.value}</td>
 					<td class="text-end" style="width: 1px;">{searches.score}</td>
-					<td>{searches.value}</a></td>
 				</tr>
 				{{{ end }}}
 			</tbody>