WIP

dDashboardServer/DashboardServer.cpp

@@ -28,6 +28,8 @@
 #include "WSRoutes.h"
 #include "AuthRoutes.h"
 #include "AuthMiddleware.h"
+#include "DashboardAuthService.h"
+#include "AuthTokenHandler.h"
 
 namespace Game {
 	Logger* logger = nullptr;
@@ -130,6 +132,12 @@ int main(int argc, char** argv) {
 		return EXIT_FAILURE;
 	}
 
+	// Set up WebSocket authentication callback using consolidated handler
+	Game::web.SetWSAuthCallback([](const std::string& token) -> bool {
+		auto result = AuthTokenHandler::ValidateToken(token);
+		return result.isValid;
+	});
+
 	// Register global middleware
 	Game::web.AddGlobalMiddleware(std::make_shared<AuthMiddleware>());
 

dDashboardServer/auth/AuthMiddleware.cpp

@@ -1,132 +1,6 @@
 #include "AuthMiddleware.h"
-#include "DashboardAuthService.h"
-#include "Game.h"
-#include "Logger.h"
-#include <string>
-#include <cctype>
-
-// Helper to extract cookie value from header
-static std::string ExtractCookieValue(const std::string& cookieHeader, const std::string& cookieName) {
-	std::string searchStr = cookieName + "=";
-	size_t pos = cookieHeader.find(searchStr);
-	
-	if (pos == std::string::npos) {
-		return "";
-	}
-	
-	size_t valueStart = pos + searchStr.length();
-	size_t valueEnd = cookieHeader.find(";", valueStart);
-	
-	if (valueEnd == std::string::npos) {
-		valueEnd = cookieHeader.length();
-	}
-	
-	std::string value = cookieHeader.substr(valueStart, valueEnd - valueStart);
-	
-	// URL decode the value
-	std::string decoded;
-	for (size_t i = 0; i < value.length(); ++i) {
-		if (value[i] == '%' && i + 2 < value.length()) {
-			std::string hex = value.substr(i + 1, 2);
-			char* endptr;
-			int charCode = static_cast<int>(std::strtol(hex.c_str(), &endptr, 16));
-			if (endptr - hex.c_str() == 2) {
-				decoded += static_cast<char>(charCode);
-				i += 2;
-				continue;
-			}
-		}
-		decoded += value[i];
-	}
-	
-	return decoded;
-}
-
-std::string AuthMiddleware::ExtractTokenFromQueryString(const std::string& queryString) {
-	if (queryString.empty()) {
-		return "";
-	}
-
-	// Parse query string to find token parameter
-	// Expected format: "?token=eyJhbGc..."
-	std::string tokenPrefix = "token=";
-	size_t tokenPos = queryString.find(tokenPrefix);
-	
-	if (tokenPos == std::string::npos) {
-		return "";
-	}
-
-	// Extract token value (from "token=" to next "&" or end of string)
-	size_t valueStart = tokenPos + tokenPrefix.length();
-	size_t valueEnd = queryString.find("&", valueStart);
-	
-	if (valueEnd == std::string::npos) {
-		valueEnd = queryString.length();
-	}
-
-	return queryString.substr(valueStart, valueEnd - valueStart);
-}
-
-std::string AuthMiddleware::ExtractTokenFromCookies(const std::string& cookieHeader) {
-	if (cookieHeader.empty()) {
-		return "";
-	}
-
-	// Extract dashboardToken cookie value
-	return ExtractCookieValue(cookieHeader, "dashboardToken");
-}
-
-std::string AuthMiddleware::ExtractTokenFromAuthHeader(const std::string& authHeader) {
-	if (authHeader.empty()) {
-		return "";
-	}
-
-	// Check for "Bearer <token>" format
-	if (authHeader.substr(0, 7) == "Bearer ") {
-		return authHeader.substr(7);
-	}
-
-	// Check for "Token <token>" format
-	if (authHeader.substr(0, 6) == "Token ") {
-		return authHeader.substr(6);
-	}
-
-	// If no prefix, assume raw token
-	return authHeader;
-}
+#include "AuthTokenHandler.h"
 
 bool AuthMiddleware::Process(HTTPContext& context, HTTPReply& reply) {
-	// Try to extract token from various sources (in priority order)
-	std::string token = ExtractTokenFromQueryString(context.queryString);
-	
-	if (token.empty()) {
-		const std::string& cookieHeader = context.GetHeader("Cookie");
-		token = ExtractTokenFromCookies(cookieHeader);
-	}
-	
-	if (token.empty()) {
-		const std::string& authHeader = context.GetHeader("Authorization");
-		token = ExtractTokenFromAuthHeader(authHeader);
-	}
-
-	// If we found a token, try to verify it
-	if (!token.empty()) {
-		std::string username;
-		uint8_t gmLevel{};
-		
-		if (DashboardAuthService::VerifyToken(token, username, gmLevel)) {
-			context.isAuthenticated = true;
-			context.authenticatedUser = username;
-			context.gmLevel = gmLevel;
-			LOG_DEBUG("User %s authenticated via API token (GM level %d)", username.c_str(), gmLevel);
-			return true;
-		} else {
-			LOG_DEBUG("Invalid authentication token provided");
-			return true;  // Continue - let routes decide if auth is required
-		}
-	}
-
-	// No token found - continue without authentication
-	// Routes can use RequireAuthMiddleware to enforce authentication
-	return true;
+	return AuthTokenHandler::ProcessHTTPContext(context, reply);
 }

dDashboardServer/auth/AuthMiddleware.h

@@ -23,12 +23,6 @@ public:
 
 	bool Process(HTTPContext& context, HTTPReply& reply) override;
 	std::string GetName() const override { return "AuthMiddleware"; }
-
-private:
-	// Extract token from various sources
-	static std::string ExtractTokenFromQueryString(const std::string& queryString);
-	static std::string ExtractTokenFromCookies(const std::string& cookieHeader);
-	static std::string ExtractTokenFromAuthHeader(const std::string& authHeader);
 };
 
 #endif // !__AUTHMIDDLEWARE_H__

dDashboardServer/auth/AuthTokenHandler.cpp

@@ -0,0 +1,186 @@
+#include "AuthTokenHandler.h"
+#include "DashboardAuthService.h"
+#include "Game.h"
+#include "Logger.h"
+#include "HTTPContext.h"
+#include "Web.h"
+
+// Helper to extract cookie value from header
+static std::string ExtractCookieValue(const std::string& cookieHeader, const std::string& cookieName) {
+	std::string searchStr = cookieName + "=";
+	size_t pos = cookieHeader.find(searchStr);
+	
+	if (pos == std::string::npos) {
+		return "";
+	}
+	
+	size_t valueStart = pos + searchStr.length();
+	size_t valueEnd = cookieHeader.find(";", valueStart);
+	
+	if (valueEnd == std::string::npos) {
+		valueEnd = cookieHeader.length();
+	}
+	
+	std::string value = cookieHeader.substr(valueStart, valueEnd - valueStart);
+	
+	// URL decode the value
+	std::string decoded;
+	for (size_t i = 0; i < value.length(); ++i) {
+		if (value[i] == '%' && i + 2 < value.length()) {
+			std::string hex = value.substr(i + 1, 2);
+			char* endptr;
+			int charCode = static_cast<int>(std::strtol(hex.c_str(), &endptr, 16));
+			if (endptr - hex.c_str() == 2) {
+				decoded += static_cast<char>(charCode);
+				i += 2;
+				continue;
+			}
+		}
+		decoded += value[i];
+	}
+	
+	return decoded;
+}
+
+std::string AuthTokenHandler::ExtractTokenFromQueryString(const std::string& queryString) {
+	if (queryString.empty()) {
+		return "";
+	}
+
+	// Parse query string to find token parameter
+	// Expected format: "?token=eyJhbGc..."
+	std::string tokenPrefix = "token=";
+	size_t tokenPos = queryString.find(tokenPrefix);
+	
+	if (tokenPos == std::string::npos) {
+		return "";
+	}
+
+	// Extract token value (from "token=" to next "&" or end of string)
+	size_t valueStart = tokenPos + tokenPrefix.length();
+	size_t valueEnd = queryString.find("&", valueStart);
+	
+	if (valueEnd == std::string::npos) {
+		valueEnd = queryString.length();
+	}
+
+	return queryString.substr(valueStart, valueEnd - valueStart);
+}
+
+std::string AuthTokenHandler::ExtractTokenFromCookieHeader(const std::string& cookieHeader) {
+	if (cookieHeader.empty()) {
+		return "";
+	}
+
+	// Extract dashboardToken cookie value
+	return ExtractCookieValue(cookieHeader, "dashboardToken");
+}
+
+std::string AuthTokenHandler::ExtractTokenFromAuthHeader(const std::string& authHeader) {
+	if (authHeader.empty()) {
+		return "";
+	}
+
+	// Check for "Bearer <token>" format
+	if (authHeader.length() >= 7 && authHeader.substr(0, 7) == "Bearer ") {
+		return authHeader.substr(7);
+	}
+
+	// Check for "Token <token>" format
+	if (authHeader.length() >= 6 && authHeader.substr(0, 6) == "Token ") {
+		return authHeader.substr(6);
+	}
+
+	// If no prefix, assume raw token
+	return authHeader;
+}
+
+std::string AuthTokenHandler::ExtractToken(
+	const std::string& queryString,
+	const std::string& cookieHeader,
+	const std::string& authHeader
+) {
+	// Try in priority order: query string, cookie, auth header
+	std::string token = ExtractTokenFromQueryString(queryString);
+	
+	if (!token.empty()) {
+		return token;
+	}
+	
+	token = ExtractTokenFromCookieHeader(cookieHeader);
+	
+	if (!token.empty()) {
+		return token;
+	}
+	
+	token = ExtractTokenFromAuthHeader(authHeader);
+	
+	return token;
+}
+
+AuthTokenHandler::TokenValidationResult AuthTokenHandler::ValidateToken(const std::string& token) {
+	TokenValidationResult result;
+
+	if (token.empty()) {
+		result.isValid = false;
+		result.errorMessage = "No token provided";
+		return result;
+	}
+
+	// Verify JWT token
+	std::string username;
+	uint8_t gmLevel = 0;
+	
+	if (!DashboardAuthService::VerifyToken(token, username, gmLevel)) {
+		result.isValid = false;
+		result.errorMessage = "Invalid or expired token";
+		LOG_DEBUG("Token validation failed");
+		return result;
+	}
+
+	result.isValid = true;
+	result.username = username;
+	result.gmLevel = gmLevel;
+	LOG_DEBUG("Token validated successfully for user: %s (GM Level: %d)", username.c_str(), gmLevel);
+	return result;
+}
+
+AuthTokenHandler::TokenValidationResult AuthTokenHandler::ExtractAndValidateToken(
+	const std::string& queryString,
+	const std::string& cookieHeader,
+	const std::string& authHeader
+) {
+	TokenValidationResult result;
+
+	// Extract token from any source
+	std::string token = ExtractToken(queryString, cookieHeader, authHeader);
+
+	if (token.empty()) {
+		result.isValid = false;
+		result.errorMessage = "No authentication token found";
+		return result;
+	}
+
+	// Validate the token
+	return ValidateToken(token);
+}
+
+bool AuthTokenHandler::ProcessHTTPContext(HTTPContext& context, HTTPReply& reply) {
+	// Extract and validate token from all available sources
+	const std::string& queryString = context.queryString;
+	const std::string& cookieHeader = context.GetHeader("Cookie");
+	const std::string& authHeader = context.GetHeader("Authorization");
+	
+	auto result = ExtractAndValidateToken(queryString, cookieHeader, authHeader);
+	
+	if (result.isValid) {
+		context.isAuthenticated = true;
+		context.authenticatedUser = result.username;
+		context.gmLevel = result.gmLevel;
+		LOG_DEBUG("User %s authenticated via API token (GM level %d)", result.username.c_str(), result.gmLevel);
+		return true;
+	} else {
+		LOG_DEBUG("Authentication token validation failed: %s", result.errorMessage.c_str());
+		return true;  // Continue - let routes decide if auth is required
+	}
+}

dDashboardServer/auth/AuthTokenHandler.h

@@ -0,0 +1,90 @@
+#pragma once
+
+#include <string>
+#include <cstdint>
+
+/**
+ * Centralized authentication token handler
+ * Consolidates token extraction from multiple sources and validation
+ * Used by both HTTP API routes and WebSocket connections
+ */
+class AuthTokenHandler {
+public:
+	/**
+	 * Result of token extraction and validation
+	 */
+	struct TokenValidationResult {
+		bool isValid{false};
+		std::string username{};
+		uint8_t gmLevel{0};
+		std::string errorMessage{};
+	};
+
+	/**
+	 * Extract token from query string
+	 * Expected format: "?token=eyJhbGc..." or "?token=xyz&other=abc"
+	 * @param queryString The query string from the request
+	 * @return The token value, or empty string if not found
+	 */
+	static std::string ExtractTokenFromQueryString(const std::string& queryString);
+
+	/**
+	 * Extract token from Cookie header
+	 * Looks for "dashboardToken=<value>" in the cookie string
+	 * @param cookieHeader The Cookie header value
+	 * @return The token value, or empty string if not found
+	 */
+	static std::string ExtractTokenFromCookieHeader(const std::string& cookieHeader);
+
+	/**
+	 * Extract token from Authorization header
+	 * Supports "Bearer <token>", "Token <token>", or raw token
+	 * @param authHeader The Authorization header value
+	 * @return The token value, or empty string if not found
+	 */
+	static std::string ExtractTokenFromAuthHeader(const std::string& authHeader);
+
+	/**
+	 * Extract token from any available source
+	 * Tries in priority order: query string, cookie, auth header
+	 * @param queryString The query string
+	 * @param cookieHeader The Cookie header
+	 * @param authHeader The Authorization header
+	 * @return The first token found, or empty string
+	 */
+	static std::string ExtractToken(
+		const std::string& queryString,
+		const std::string& cookieHeader,
+		const std::string& authHeader
+	);
+
+	/**
+	 * Validate a token and extract user information
+	 * Checks JWT signature, expiration, and user permissions
+	 * @param token The JWT token
+	 * @return TokenValidationResult with validity status and user info
+	 */
+	static TokenValidationResult ValidateToken(const std::string& token);
+
+	/**
+	 * Convenience method: Extract and validate token in one call
+	 * @param queryString Query string from request
+	 * @param cookieHeader Cookie header from request
+	 * @param authHeader Authorization header from request
+	 * @return TokenValidationResult with validity status and user info
+	 */
+	static TokenValidationResult ExtractAndValidateToken(
+		const std::string& queryString,
+		const std::string& cookieHeader,
+		const std::string& authHeader
+	);
+
+	/**
+	 * Process authentication for HTTP middleware use
+	 * Extracts and validates token from request, sets HTTPContext properties
+	 * @param context HTTP request context (modified to include auth info)
+	 * @param reply HTTP reply (not modified unless validation fails silently)
+	 * @return true to continue middleware chain, false to stop
+	 */
+	static bool ProcessHTTPContext(class HTTPContext& context, class HTTPReply& reply);
+};

dDashboardServer/auth/CMakeLists.txt

@@ -2,6 +2,7 @@ set(DASHBOARDAUTH_SOURCES
 	"JWTUtils.cpp"
 	"DashboardAuthService.cpp"
 	"AuthMiddleware.cpp"
+	"AuthTokenHandler.cpp"
 	"RequireAuthMiddleware.cpp"
 )
 

dDashboardServer/routes/WSRoutes.cpp

@@ -13,8 +13,29 @@ void RegisterWSRoutes() {
 	Game::web.RegisterWSSubscription("player_joined");
 	Game::web.RegisterWSSubscription("player_left");
 	
-	// dashboard_update: Broadcasts complete dashboard data every 2 seconds
-	// Other subscriptions can be triggered by events from the master server
+	// Account subscriptions
+	Game::web.RegisterWSSubscription("account_update");
+	Game::web.RegisterWSSubscription("accounts_table_update");
+	Game::web.RegisterWSSubscription("account_list_changed");
+	
+	// Character subscriptions
+	Game::web.RegisterWSSubscription("character_update");
+	Game::web.RegisterWSSubscription("characters_table_update");
+	Game::web.RegisterWSSubscription("character_list_changed");
+	
+	// Property subscriptions
+	Game::web.RegisterWSSubscription("property_update");
+	Game::web.RegisterWSSubscription("properties_table_update");
+	Game::web.RegisterWSSubscription("property_list_changed");
+	
+	// Play Key subscriptions
+	Game::web.RegisterWSSubscription("play_key_update");
+	Game::web.RegisterWSSubscription("play_keys_table_update");
+	Game::web.RegisterWSSubscription("play_key_list_changed");
+	
+	// Bug Report subscriptions
+	Game::web.RegisterWSSubscription("bug_report_update");
+	Game::web.RegisterWSSubscription("bug_reports_table_update");
 }
 
 void BroadcastDashboardUpdate() {
@@ -33,3 +54,179 @@ void BroadcastDashboardUpdate() {
 	// Broadcast to all connected WebSocket clients subscribed to "dashboard_update"
 	Game::web.SendWSMessage("dashboard_update", data);
 }
+
+void BroadcastAccountUpdate(uint32_t accountId) {
+	try {
+		// Get updated account data
+		nlohmann::json accountData = Database::Get()->GetAccountById(accountId);
+		
+		// Only broadcast if account was found
+		if (!accountData.contains("error")) {
+			accountData["event"] = "account_update";
+			accountData["accountId"] = accountId;
+			Game::web.SendWSMessage("account_update", accountData);
+		}
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting account update: %s", ex.what());
+	}
+}
+
+void BroadcastAccountsTableUpdate() {
+	try {
+		// Broadcast that the accounts table has been modified
+		// Clients should reload the current page of data
+		nlohmann::json message = {
+			{"event", "accounts_table_update"},
+			{"message", "Accounts table has been updated"}
+		};
+		Game::web.SendWSMessage("accounts_table_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting accounts table update: %s", ex.what());
+	}
+}
+
+void BroadcastAccountListChanged() {
+	try {
+		// Broadcast that accounts list changed (new account created or deleted)
+		nlohmann::json message = {
+			{"event", "account_list_changed"},
+			{"totalAccounts", Database::Get()->GetAccountCount()}
+		};
+		Game::web.SendWSMessage("account_list_changed", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting account list change: %s", ex.what());
+	}
+}
+
+void BroadcastCharacterUpdate(uint32_t characterId) {
+	try {
+		// Get updated character data and broadcast
+		nlohmann::json message = {
+			{"event", "character_update"},
+			{"characterId", characterId}
+		};
+		Game::web.SendWSMessage("character_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting character update: %s", ex.what());
+	}
+}
+
+void BroadcastCharactersTableUpdate() {
+	try {
+		nlohmann::json message = {
+			{"event", "characters_table_update"},
+			{"message", "Characters table has been updated"}
+		};
+		Game::web.SendWSMessage("characters_table_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting characters table update: %s", ex.what());
+	}
+}
+
+void BroadcastCharacterListChanged() {
+	try {
+		nlohmann::json message = {
+			{"event", "character_list_changed"},
+			{"totalCharacters", Database::Get()->GetCharacterCount()}
+		};
+		Game::web.SendWSMessage("character_list_changed", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting character list change: %s", ex.what());
+	}
+}
+
+void BroadcastPropertyUpdate(uint32_t propertyId) {
+	try {
+		nlohmann::json message = {
+			{"event", "property_update"},
+			{"propertyId", propertyId}
+		};
+		Game::web.SendWSMessage("property_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting property update: %s", ex.what());
+	}
+}
+
+void BroadcastPropertiesTableUpdate() {
+	try {
+		nlohmann::json message = {
+			{"event", "properties_table_update"},
+			{"message", "Properties table has been updated"}
+		};
+		Game::web.SendWSMessage("properties_table_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting properties table update: %s", ex.what());
+	}
+}
+
+void BroadcastPropertyListChanged() {
+	try {
+		nlohmann::json message = {
+			{"event", "property_list_changed"},
+			{"totalProperties", 0} // TODO: Get from database
+		};
+		Game::web.SendWSMessage("property_list_changed", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting property list change: %s", ex.what());
+	}
+}
+
+void BroadcastPlayKeyUpdate(uint32_t playKeyId) {
+	try {
+		nlohmann::json message = {
+			{"event", "play_key_update"},
+			{"playKeyId", playKeyId}
+		};
+		Game::web.SendWSMessage("play_key_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting play key update: %s", ex.what());
+	}
+}
+
+void BroadcastPlayKeysTableUpdate() {
+	try {
+		nlohmann::json message = {
+			{"event", "play_keys_table_update"},
+			{"message", "Play Keys table has been updated"}
+		};
+		Game::web.SendWSMessage("play_keys_table_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting play keys table update: %s", ex.what());
+	}
+}
+
+void BroadcastPlayKeyListChanged() {
+	try {
+		nlohmann::json message = {
+			{"event", "play_key_list_changed"},
+			{"totalPlayKeys", 0} // TODO: Get from database
+		};
+		Game::web.SendWSMessage("play_key_list_changed", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting play key list change: %s", ex.what());
+	}
+}
+
+void BroadcastBugReportUpdate(uint32_t bugReportId) {
+	try {
+		nlohmann::json message = {
+			{"event", "bug_report_update"},
+			{"bugReportId", bugReportId}
+		};
+		Game::web.SendWSMessage("bug_report_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting bug report update: %s", ex.what());
+	}
+}
+
+void BroadcastBugReportsTableUpdate() {
+	try {
+		nlohmann::json message = {
+			{"event", "bug_reports_table_update"},
+			{"message", "Bug Reports table has been updated"}
+		};
+		Game::web.SendWSMessage("bug_reports_table_update", message);
+	} catch (const std::exception& ex) {
+		LOG_DEBUG("Error broadcasting bug reports table update: %s", ex.what());
+	}
+}

dDashboardServer/routes/WSRoutes.h

@@ -1,4 +1,31 @@
 #pragma once
 
+#include "json.hpp"
+#include <cstdint>
+
 void RegisterWSRoutes();
 void BroadcastDashboardUpdate();
+
+// Account broadcasts
+void BroadcastAccountUpdate(uint32_t accountId);
+void BroadcastAccountsTableUpdate();
+void BroadcastAccountListChanged();
+
+// Character broadcasts
+void BroadcastCharacterUpdate(uint32_t characterId);
+void BroadcastCharactersTableUpdate();
+void BroadcastCharacterListChanged();
+
+// Property broadcasts
+void BroadcastPropertyUpdate(uint32_t propertyId);
+void BroadcastPropertiesTableUpdate();
+void BroadcastPropertyListChanged();
+
+// Play Key broadcasts
+void BroadcastPlayKeyUpdate(uint32_t playKeyId);
+void BroadcastPlayKeysTableUpdate();
+void BroadcastPlayKeyListChanged();
+
+// Bug Report broadcasts
+void BroadcastBugReportUpdate(uint32_t bugReportId);
+void BroadcastBugReportsTableUpdate();

dDashboardServer/static/css/dashboard.css

@@ -1,381 +1,148 @@
-/* Minimal custom styling - mostly Bootstrap5 utilities */
+/* DarkflameServer Dashboard - Minimal Branding */
+
+:root {
+	--primary-color: #667eea;
+	--secondary-color: #764ba2;
+	--dark-bg: #0f0f1e;
+	--card-bg: rgba(26, 26, 46, 0.8);
+}
 
 body {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-	margin: 0;
-	padding: 0;
+	background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1a2e 100%);
+	display: grid;
+	grid-template-columns: 280px 1fr;
+	grid-template-rows: auto 1fr auto;
+	min-height: 100vh;
 }
 
-body.d-flex.bg-dark.text-white {
-	background-color: #0d0d0d;
-	color: #fff;
-}
-
-/* Sidebar adjustments */
+/* Grid Layout */
 .navbar.flex-column {
-	box-shadow: 0.125rem 0 0.25rem rgba(0, 0, 0, 0.075);
+	grid-row: 1 / -1;
+	grid-column: 1;
+	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+	box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
+	overflow-y: auto;
 }
 
-.navbar.flex-column .navbar-nav {
-	width: 100%;
+main {
+	grid-column: 2;
+	grid-row: 2;
+	display: flex;
+	flex-direction: column;
 }
 
+.navbar:not(.flex-column) {
+	grid-column: 1 / -1;
+	grid-row: 1;
+	background: rgba(26, 26, 46, 0.95);
+	border-bottom: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+footer {
+	grid-column: 1 / -1;
+	grid-row: 3;
+	background: rgba(26, 26, 46, 0.95);
+	border-top: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+/* Sidebar Navigation */
 .navbar.flex-column .nav-link {
-	padding: 0.75rem 1.25rem;
 	border-left: 3px solid transparent;
 	transition: all 0.3s ease;
 }
 
 .navbar.flex-column .nav-link:hover {
-	background-color: rgba(255, 255, 255, 0.1);
-	border-left-color: #667eea;
-	padding-left: 1.5rem;
+	background-color: rgba(102, 126, 234, 0.15);
+	border-left-color: var(--primary-color);
 }
 
 .navbar.flex-column .nav-link.active {
-	background-color: rgba(255, 255, 255, 0.1);
-	border-left-color: #667eea;
+	background-color: rgba(102, 126, 234, 0.25);
+	border-left-color: var(--primary-color);
+	color: var(--primary-color);
 }
 
-main {
-	display: flex;
-	flex-direction: column;
-	padding: 0;
-	min-height: 100vh;
-}
-
-/* Responsive design */
-@media (max-width: 991.98px) {
-	body {
-		display: block !important;
-	}
-	
-	main {
-		margin-left: 0 !important;
-	}
-	
-	.navbar.flex-column {
-		width: 100% !important;
-		height: auto !important;
-		position: relative !important;
-		top: auto !important;
-		start: auto !important;
-	}
-}
-
-.navbar {
-	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-}
-
-.username {
-	font-weight: 600;
-	color: #667eea;
-	font-size: 1.1em;
-}
-
-.logout-btn {
-	padding: 10px 20px;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	border: none;
-	border-radius: 5px;
-	cursor: pointer;
-	font-weight: 600;
-	transition: opacity 0.3s;
-}
-
-.logout-btn:hover {
-	opacity: 0.9;
-}
-
-.grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 20px;
-	margin-bottom: 20px;
-}
-
-.stat {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 10px 0;
-	border-bottom: 1px solid #eee;
-}
-
-.stat:last-child {
-	border-bottom: none;
-}
-
-.stat-label {
-	color: #666;
-	font-weight: 500;
-}
-
-.stat-value {
-	color: #333;
-	font-weight: bold;
-	font-size: 1.2em;
-}
-
-.status {
-	display: inline-block;
-	padding: 5px 15px;
-	border-radius: 20px;
-	font-size: 0.9em;
-	font-weight: bold;
-}
-
-.status.online {
-	background: #4caf50;
-	color: white;
-}
-
-.status.offline {
-	background: #f44336;
-	color: white;
-}
-
-.world-list {
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.world-item {
-	padding: 15px;
-	background: #f5f5f5;
-	border-radius: 5px;
-	margin-bottom: 10px;
-}
-
-.world-item h3 {
-	color: #333;
-	margin-bottom: 8px;
-}
-
-.world-detail {
-	color: #666;
-	font-size: 0.9em;
-	margin: 3px 0;
-}
-
-.loading {
-	text-align: center;
-	padding: 20px;
-	color: #666;
-}
-
-/* Dark theme for data tables and containers */
-
-/* Container margin for sidebar layout */
-.account-view-container,
-.accounts-container,
-.characters-container,
-.play-keys-container,
-.properties-container,
-.bug-reports-container {
-	margin-left: 280px;
-	padding: 20px;
-}
-
-/* Table card styling */
-.table-card {
-	background-color: #1a1a1a;
-	border: 1px solid #333;
-	border-radius: 0.5rem;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.table-header {
-	background-color: #222;
-	padding: 1.5rem;
-	border-bottom: 1px solid #333;
-	border-radius: 0.5rem 0.5rem 0 0;
-}
-
-.table-header h2 {
-	margin: 0;
-	color: #fff;
-}
-
-.table-body {
-	padding: 1.5rem;
-}
-
-/* Bootstrap card overrides for dark theme */
+/* Cards */
 .card {
-	background-color: #1a1a1a;
-	border: 1px solid #333;
-	border-radius: 0.5rem;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	margin-bottom: 1.5rem;
+	background: var(--card-bg);
+	border: 1px solid rgba(102, 126, 234, 0.2);
+	transition: all 0.3s ease;
+}
+
+.card:hover {
+	border-color: rgba(102, 126, 234, 0.4);
+	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
 }
 
 .card-header {
-	background-color: #222;
-	padding: 1.5rem;
-	border-bottom: 1px solid #333;
-	border-radius: 0.5rem 0.5rem 0 0;
+	background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
+	border-bottom: 1px solid rgba(102, 126, 234, 0.3);
 }
 
-.card-header h2 {
-	margin: 0;
-	color: #fff;
-}
-
-.card-body {
-	padding: 1.5rem;
-}
-
-/* Table styling */
+/* Tables */
 .table-dark {
-	color: #fff;
-}
-
-.table-dark thead {
-	background-color: #2a2a2a;
+	border-color: rgba(102, 126, 234, 0.2);
 }
 
 .table-dark thead th {
-	border-bottom: 2px solid #444;
-	color: #aaa;
-	font-weight: 600;
-	text-transform: uppercase;
-	font-size: 0.875rem;
-	padding: 1rem;
-}
-
-.table-dark tbody td {
-	padding: 0.875rem 1rem;
-	border-bottom: 1px solid #333;
-	vertical-align: middle;
+	background: rgba(102, 126, 234, 0.15);
+	border-bottom: 2px solid rgba(102, 126, 234, 0.3);
 }
 
 .table-dark tbody tr:hover {
-	background-color: #252525;
-}
-
-/* DataTables customization */
-.dataTables_wrapper {
-	color: #fff;
-}
-
-.dataTables_wrapper .dataTables_filter input {
-	background-color: #2a2a2a;
-	color: #fff;
-	border: 1px solid #444;
-	border-radius: 0.25rem;
-	padding: 0.4rem 0.6rem;
-}
-
-.dataTables_wrapper .dataTables_filter input::placeholder {
-	color: #888;
-}
-
-.dataTables_wrapper .dataTables_info {
-	color: #aaa;
-	padding: 1rem;
+	background-color: rgba(102, 126, 234, 0.1);
 }
 
+/* DataTables */
+.dataTables_wrapper .dataTables_filter input,
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-	background: #2a2a2a;
-	color: #fff;
-	border: 1px solid #444;
-	margin: 0 2px;
-	padding: 0.4rem 0.8rem;
-	border-radius: 0.25rem;
-	cursor: pointer;
-	transition: all 0.2s;
-}
-
-.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
-	background: #3a3a3a;
-	border: 1px solid #555;
+	background-color: rgba(42, 42, 58, 0.8);
+	border: 1px solid rgba(102, 126, 234, 0.3);
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current {
-	background: #0d6efd;
-	border: 1px solid #0d6efd;
+	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+	border: none;
 }
 
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+/* Buttons */
+.btn-primary {
+	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+	border: none;
 }
 
-.dataTables_wrapper .dataTables_length select {
-	background-color: #2a2a2a;
-	color: #fff;
-	border: 1px solid #444;
-	padding: 0.4rem 0.6rem;
-	border-radius: 0.25rem;
+.btn-primary:hover:not(:disabled) {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
-/* Detail grid layout */
-.detail-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-	gap: 1.5rem;
+.logout-btn {
+	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.detail-item {
-	background-color: #0a0a0a;
-	padding: 1rem;
-	border-radius: 0.25rem;
-	border-left: 3px solid #0d6efd;
+/* Custom Badge Styles */
+.badge-banned {
+	background-color: #dc3545;
 }
 
-.detail-label {
-	color: #999;
-	font-size: 0.875rem;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	margin-bottom: 0.5rem;
+.badge-locked {
+	background-color: #fd7e14;
 }
 
-.detail-value {
-	color: #fff;
-	font-size: 1rem;
-	font-weight: 500;
-}
-
-/* Badge styling */
-.badge {
-	display: inline-block;
-	padding: 0.35rem 0.6rem;
-	font-size: 0.8rem;
-	font-weight: 500;
-	border-radius: 0.25rem;
+.badge-gm {
+	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
 .badge-active {
 	background-color: #28a745;
-	color: #fff;
 }
 
 .badge-inactive {
 	background-color: #6c757d;
-	color: #fff;
-}
-
-.badge-banned {
-	background-color: #dc3545;
-	color: #fff;
-}
-
-.badge-locked {
-	background-color: #ffc107;
-	color: #000;
-}
-
-.badge-gm {
-	background-color: #17a2b8;
-	color: #fff;
 }
 
 .badge-approved {
 	background-color: #28a745;
-	color: #fff;
 }
 
 .badge-pending {
@@ -383,113 +150,136 @@ main {
 	color: #000;
 }
 
-/* Button styling */
+.badge-primary {
+	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+}
+
+/* Status Indicators */
+.status.online::before,
+.status.offline::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	margin-right: 4px;
+}
+
+.status.online::before {
+	background: #4caf50;
+}
+
+.status.offline::before {
+	background: #f44336;
+}
+
+/* Detail Grid */
+.detail-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 15px;
+	margin-bottom: 20px;
+}
+
+.detail-item {
+	border-left: 3px solid var(--primary-color);
+	padding-left: 12px;
+}
+
+.detail-label {
+	font-size: 0.875rem;
+	color: #999;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-bottom: 5px;
+}
+
+.detail-value {
+	font-size: 1rem;
+	color: #fff;
+}
+
 .button-group {
 	display: flex;
-	gap: 0.5rem;
-	margin-top: 1.5rem;
-}
-
-.btn {
-	padding: 0.5rem 1rem;
-	border-radius: 0.25rem;
-	border: none;
-	cursor: pointer;
-	font-weight: 500;
-	transition: all 0.2s;
-}
-
-.btn-sm {
-	padding: 0.25rem 0.5rem;
-	font-size: 0.75rem;
-}
-
-.btn-primary {
-	background-color: #0d6efd;
-	color: #fff;
-}
-
-.btn-primary:hover {
-	background-color: #0b5ed7;
-}
-
-.btn-secondary {
-	background-color: #6c757d;
-	color: #fff;
-}
-
-.btn-secondary:hover {
-	background-color: #5c636a;
-}
-
-.btn-danger {
-	background-color: #dc3545;
-	color: #fff;
-}
-
-.btn-danger:hover {
-	background-color: #c82333;
-}
-
-.btn-info {
-	background-color: #17a2b8;
-	color: #fff;
-}
-
-.btn-info:hover {
-	background-color: #138496;
-}
-
-.btn-warning {
-	background-color: #ffc107;
-	color: #000;
-}
-
-.btn-warning:hover {
-	background-color: #e0a800;
-}
-
-/* Action buttons */
-.account-actions {
-	display: flex;
-	gap: 0.5rem;
-}
-
-/* Utility classes */
-.text-muted {
-	color: #999 !important;
+	gap: 10px;
+	flex-wrap: wrap;
+	margin-top: 20px;
 }
 
 .back-link {
-	color: #0d6efd;
+	color: var(--primary-color);
 	text-decoration: none;
-	margin-bottom: 1rem;
+	font-weight: 600;
+	transition: all 0.3s;
 	display: inline-block;
+	margin-bottom: 20px;
 }
 
 .back-link:hover {
-	text-decoration: underline;
+	color: var(--secondary-color);
 }
 
-.report-preview {
-	max-width: 200px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+/* Container Wrappers - Use Bootstrap spacing */
+.accounts-container,
+.characters-container,
+.bug-reports-container,
+.properties-container,
+.play-keys-container,
+.account-view-container {
+	width: 100%;
 }
 
-.search-section {
-	margin-bottom: 1.5rem;
+/* Responsive */
+@media (max-width: 991.98px) {
+	body {
+		grid-template-columns: 1fr;
+	}
+
+	.navbar.flex-column {
+		grid-column: 1 / -1;
+		grid-row: 1;
+		flex-direction: row;
+		flex-wrap: wrap;
+		overflow-y: visible;
+	}
+
+	.navbar.flex-column .nav-link {
+		border-left: none;
+		border-bottom: 2px solid transparent;
+	}
+
+	.navbar.flex-column .nav-link:hover,
+	.navbar.flex-column .nav-link.active {
+		border-bottom-color: var(--primary-color);
+	}
+
+	main {
+		grid-column: 1;
+		grid-row: 2;
+	}
+
+	footer {
+		grid-column: 1;
+		grid-row: 3;
+	}
+
+	.detail-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.table-dark {
+		font-size: 12px;
+		min-width: 100%;
+	}
+
+	.table-dark th,
+	.table-dark td {
+		white-space: nowrap;
+		padding: 8px 6px;
+	}
 }
 
-.search-input {
-	background-color: #2a2a2a;
-	border: 1px solid #444;
-	color: #fff;
-	padding: 0.5rem;
-	border-radius: 0.25rem;
+@media (max-width: 575.98px) {
+	.navbar.flex-column .nav-link {
+		font-size: 11px;
+	}
 }
-
-.search-input::placeholder {
-	color: #888;
-}

dDashboardServer/static/css/login.css

@@ -1,30 +1,296 @@
-/* Custom styling for login page on top of Bootstrap5 */
+/* Modern Login Page Styling */
 
-body {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body.d-flex.bg-dark.text-white {
+	background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+	min-height: 100vh;
 }
 
-.card {
-	border-radius: 0.5rem;
-	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
+/* Hide elements not needed on login */
+body .navbar,
+body > footer {
+	display: none !important;
 }
 
-.btn-primary {
+body .container-fluid {
+	padding: 0 !important;
+}
+
+.login-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	padding: 20px;
+}
+
+.login-wrapper {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	width: 100%;
+	max-width: 1100px;
+	min-height: 600px;
+	background: white;
+	border-radius: 16px;
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+	overflow: hidden;
+}
+
+/* Left side - Branding */
+.login-left {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	padding: 60px 40px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	color: white;
+}
+
+.login-branding {
+	text-align: center;
+}
+
+.login-branding .logo {
+	font-size: 64px;
+	margin-bottom: 20px;
+}
+
+.login-branding h1 {
+	font-size: 32px;
+	font-weight: 700;
+	margin-bottom: 8px;
+	letter-spacing: -0.5px;
+}
+
+.login-branding p {
+	font-size: 14px;
+	opacity: 0.9;
+}
+
+.login-info {
+	text-align: center;
+}
+
+.login-info h3 {
+	font-size: 24px;
+	font-weight: 600;
+	margin-bottom: 12px;
+}
+
+.login-info p {
+	font-size: 14px;
+	opacity: 0.85;
+	line-height: 1.6;
+}
+
+/* Right side - Form */
+.login-right {
+	padding: 60px 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.login-form-wrapper {
+	width: 100%;
+}
+
+.login-form-wrapper h2 {
+	font-size: 28px;
+	font-weight: 700;
+	color: #1a1a2e;
+	margin-bottom: 30px;
+}
+
+.login-form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.form-group {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+
+.form-group label {
+	font-size: 13px;
+	font-weight: 600;
+	color: #333;
+	margin-bottom: 8px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.form-group input {
+	padding: 12px 16px;
+	font-size: 14px;
+	border: 2px solid #e0e0e0;
+	border-radius: 8px;
+	transition: all 0.3s ease;
+	font-family: inherit;
+	color: #1a1a2e;
+}
+
+.form-group input::placeholder {
+	color: #999;
+}
+
+.form-group input:focus {
+	outline: none;
+	border-color: #667eea;
+	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-focus {
+	height: 2px;
+	background: linear-gradient(90deg, transparent, #667eea, transparent);
+	border-radius: 2px;
+	margin-top: -2px;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.form-group input:focus ~ .form-focus {
+	opacity: 1;
+}
+
+.form-checkbox {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 10px 0 20px 0;
+}
+
+.form-checkbox input[type="checkbox"] {
+	width: 18px;
+	height: 18px;
+	cursor: pointer;
+	accent-color: #667eea;
+}
+
+.form-checkbox label {
+	font-size: 13px;
+	color: #666;
+	cursor: pointer;
+	margin: 0;
+	text-transform: none;
+	letter-spacing: normal;
+}
+
+.btn-login {
+	padding: 12px 24px;
+	font-size: 15px;
+	font-weight: 600;
+	color: white;
 	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	border: none;
+	border-radius: 8px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	margin-top: 10px;
 }
 
-.btn-primary:hover {
-	background: linear-gradient(135deg, #5568d3 0%, #6a3f93 100%);
+.btn-login:hover:not(:disabled) {
+	transform: translateY(-2px);
+	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
 }
 
-.form-control:focus {
-	border-color: #667eea;
-	box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+.btn-login:active {
+	transform: translateY(0);
 }
 
-h1 {
-	color: #333;
-	font-weight: 600;
+.btn-login:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+}
+
+.spinner {
+	width: 16px;
+	height: 16px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-top-color: white;
+	border-radius: 50%;
+	animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+	to { transform: rotate(360deg); }
+}
+
+.alert-box {
+	padding: 12px 16px;
+	margin-bottom: 20px;
+	border-radius: 8px;
+	font-size: 13px;
+	display: none;
+}
+
+.alert-box.alert-danger {
+	background-color: #fee;
+	color: #c33;
+	border: 1px solid #fcc;
+}
+
+.alert-box.alert-success {
+	background-color: #efe;
+	color: #3c3;
+	border: 1px solid #cfc;
+}
+
+.login-footer {
+	text-align: center;
+	margin-top: 30px;
+	padding-top: 20px;
+	border-top: 1px solid #e0e0e0;
+}
+
+.login-footer p {
+	font-size: 12px;
+	color: #999;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	.login-wrapper {
+		grid-template-columns: 1fr;
+		min-height: auto;
+	}
+
+	.login-left {
+		padding: 40px 30px;
+		justify-content: center;
+		min-height: 250px;
+	}
+
+	.login-right {
+		padding: 40px 30px;
+	}
+
+	.login-branding .logo {
+		font-size: 48px;
+	}
+
+	.login-branding h1 {
+		font-size: 24px;
+	}
+
+	.login-form-wrapper h2 {
+		font-size: 24px;
+	}
+
+	.form-group input {
+		font-size: 16px;
+	}
 }

dDashboardServer/static/js/dashboard.js

@@ -129,6 +129,14 @@ function connectWebSocket() {
 				event: 'subscribe',
 				subscription: 'dashboard_update'
 			}));
+
+			// Mark connection as ready for other handlers
+			wsConnectionReady = true;
+
+			// Initialize real-time table manager
+			if (typeof realtimeManager !== 'undefined') {
+				realtimeManager.Initialize();
+			}
 			
 			document.getElementById('connection-status')?.remove();
 		};
@@ -147,6 +155,12 @@ function connectWebSocket() {
 				if (data.event === 'dashboard_update') {
 					updateDashboard(data);
 				}
+
+				// Route to generic realtime handler for all table updates
+				if (typeof realtimeManager !== 'undefined') {
+					realtimeManager.HandleMessage(data);
+				}
+
 			} catch (error) {
 				console.error('Error parsing WebSocket message:', error);
 			}

dDashboardServer/static/js/realtime.js

@@ -0,0 +1,339 @@
+/**
+ * Generic Real-time WebSocket Updates for Dashboard Tables
+ * Provides reactive, non-blocking updates for all admin tables
+ */
+
+const realtimeManager = {
+	tables: {},
+	currentEntityId: null,
+	wsReady: false,
+
+	/**
+	 * Initialize real-time updates for a DataTable
+	 * @param {string} entityType - Type of entity (account, character, property, etc.)
+	 * @param {jQuery} tableElement - jQuery DataTable element
+	 */
+	RegisterTable(entityType, tableElement) {
+		if (!tableElement || !tableElement.DataTable) {
+			console.warn(`Invalid table element for entity type: ${entityType}`);
+			return;
+		}
+
+		this.tables[entityType] = {
+			element: tableElement,
+			table: tableElement.DataTable(),
+			lastUpdate: Date.now()
+		};
+
+		console.log(`Registered real-time table for entity type: ${entityType}`);
+	},
+
+	/**
+	 * Initialize WebSocket listeners for all entity types
+	 */
+	Initialize() {
+		if (!ws || ws.readyState !== WebSocket.OPEN) {
+			console.warn('WebSocket not ready for realtime initialization');
+			return;
+		}
+
+		this.wsReady = true;
+		console.log('Initialized real-time WebSocket listeners');
+		this.SubscribeToAll();
+	},
+
+	/**
+	 * Subscribe to all registered entity types
+	 */
+	SubscribeToAll() {
+		const subscriptions = [
+			'account_update',
+			'accounts_table_update',
+			'account_list_changed',
+			'character_update',
+			'characters_table_update',
+			'character_list_changed',
+			'property_update',
+			'properties_table_update',
+			'property_list_changed',
+			'play_key_update',
+			'play_keys_table_update',
+			'play_key_list_changed',
+			'bug_report_update',
+			'bug_reports_table_update'
+		];
+
+		for (const subscription of subscriptions) {
+			if (!ws || ws.readyState !== WebSocket.OPEN) break;
+
+			ws.send(JSON.stringify({
+				event: 'subscribe',
+				subscription: subscription
+			}));
+		}
+
+		console.log(`Subscribed to ${subscriptions.length} real-time events`);
+	},
+
+	/**
+	 * Handle incoming WebSocket messages
+	 */
+	HandleMessage(data) {
+		if (!data.event) return;
+
+		// Route to appropriate handler based on event type
+		if (data.event.includes('account')) {
+			this.HandleAccountEvent(data);
+		} else if (data.event.includes('character')) {
+			this.HandleCharacterEvent(data);
+		} else if (data.event.includes('property')) {
+			this.HandlePropertyEvent(data);
+		} else if (data.event.includes('play_key')) {
+			this.HandlePlayKeyEvent(data);
+		} else if (data.event.includes('bug_report')) {
+			this.HandleBugReportEvent(data);
+		}
+	},
+
+	/**
+	 * Handle account-related events
+	 */
+	HandleAccountEvent(data) {
+		if (data.event === 'account_update') {
+			this.UpdateRow('account', data.accountId || data.id, data);
+			// Also update detail panel if viewing this account
+			this.UpdateDetailPanel('account', data);
+		} else if (data.event === 'accounts_table_update') {
+			this.ReloadTable('account');
+		} else if (data.event === 'account_list_changed') {
+			this.UpdateListCount('account', data.totalAccounts);
+			this.ReloadTable('account', true);
+		}
+	},
+
+	/**
+	 * Handle character-related events
+	 */
+	HandleCharacterEvent(data) {
+		if (data.event === 'character_update') {
+			this.UpdateRow('character', data.characterId || data.id, data);
+		} else if (data.event === 'characters_table_update') {
+			this.ReloadTable('character');
+		} else if (data.event === 'character_list_changed') {
+			this.UpdateListCount('character', data.totalCharacters);
+			this.ReloadTable('character', true);
+		}
+	},
+
+	/**
+	 * Handle property-related events
+	 */
+	HandlePropertyEvent(data) {
+		if (data.event === 'property_update') {
+			this.UpdateRow('property', data.propertyId || data.id, data);
+		} else if (data.event === 'properties_table_update') {
+			this.ReloadTable('property');
+		} else if (data.event === 'property_list_changed') {
+			this.UpdateListCount('property', data.totalProperties);
+			this.ReloadTable('property', true);
+		}
+	},
+
+	/**
+	 * Handle play key-related events
+	 */
+	HandlePlayKeyEvent(data) {
+		if (data.event === 'play_key_update') {
+			this.UpdateRow('play_key', data.playKeyId || data.id, data);
+		} else if (data.event === 'play_keys_table_update') {
+			this.ReloadTable('play_key');
+		} else if (data.event === 'play_key_list_changed') {
+			this.UpdateListCount('play_key', data.totalPlayKeys);
+			this.ReloadTable('play_key', true);
+		}
+	},
+
+	/**
+	 * Handle bug report-related events
+	 */
+	HandleBugReportEvent(data) {
+		if (data.event === 'bug_report_update') {
+			this.UpdateRow('bug_report', data.bugReportId || data.id, data);
+		} else if (data.event === 'bug_reports_table_update') {
+			this.ReloadTable('bug_report');
+		}
+	},
+
+	/**
+	 * Update a single row in a DataTable
+	 */
+	UpdateRow(entityType, entityId, data) {
+		if (!this.tables[entityType]) {
+			console.debug(`No table registered for entity type: ${entityType}`);
+			return;
+		}
+
+		try {
+			const table = this.tables[entityType].table;
+			const rows = table.rows().nodes();
+			
+			// Find and invalidate the matching row
+			let found = false;
+			for (let row of rows) {
+				const rowData = table.row(row).data();
+				if (rowData && (rowData.id === entityId || rowData.accountId === entityId || 
+					rowData.characterId === entityId || rowData.propertyId === entityId || 
+					rowData.playKeyId === entityId)) {
+					table.row(row).invalidate().draw(false);
+					found = true;
+					break;
+				}
+			}
+
+			if (found) {
+				this.ShowToast('Updated', `${entityType} data has been refreshed`, 'info');
+			}
+		} catch (e) {
+			console.debug(`Error updating row for ${entityType}:`, e);
+		}
+	},
+
+	/**
+	 * Reload a table without page change
+	 */
+	ReloadTable(entityType, resetPage = false) {
+		if (!this.tables[entityType]) {
+			console.debug(`No table registered for entity type: ${entityType}`);
+			return;
+		}
+
+		try {
+			const table = this.tables[entityType].table;
+			
+			if (resetPage) {
+				table.page(0).ajax.reload();
+			} else {
+				table.ajax.reload(null, false);
+			}
+
+			this.ShowToast('Updated', `${entityType} list has been refreshed`, 'info');
+		} catch (e) {
+			console.error(`Error reloading table for ${entityType}:`, e);
+		}
+	},
+
+	/**
+	 * Update list count display
+	 */
+	UpdateListCount(entityType, count) {
+		try {
+			const selector = `.${entityType}-count`;
+			const countEl = document.querySelector(selector);
+			if (countEl) {
+				countEl.textContent = count;
+			}
+		} catch (e) {
+			console.debug(`Error updating count for ${entityType}:`, e);
+		}
+	},
+
+	/**
+	 * Set current entity being viewed for detail updates
+	 */
+	SetCurrentEntity(entityType, entityId) {
+		this.currentEntity = { type: entityType, id: entityId };
+		console.log(`Viewing ${entityType} ID: ${entityId}`);
+	},
+
+	/**
+	 * Clear current entity
+	 */
+	ClearCurrentEntity() {
+		this.currentEntity = null;
+	},
+
+	/**
+	 * Update detail panel for current entity
+	 */
+	UpdateDetailPanel(entityType, data) {
+		if (!this.currentEntity || this.currentEntity.type !== entityType || 
+			this.currentEntity.id !== (data.id || data.accountId)) {
+			return;
+		}
+
+		try {
+			// Update all elements with data-field attributes
+			for (const [key, value] of Object.entries(data)) {
+				const selectors = [
+					`.detail-${key}`,
+					`[data-field="${key}"]`,
+					`.${entityType}-${key}`
+				];
+
+				for (const selector of selectors) {
+					const elements = document.querySelectorAll(selector);
+					for (const el of elements) {
+						this.UpdateElement(el, key, value);
+					}
+				}
+			}
+
+			this.ShowToast('Updated', `${entityType} data refreshed`, 'info');
+		} catch (e) {
+			console.error(`Error updating detail panel:`, e);
+		}
+	},
+
+	/**
+	 * Update an individual element with new value
+	 */
+	UpdateElement(element, fieldName, value) {
+		if (!element) return;
+
+		try {
+			// Handle different field types
+			if (fieldName.includes('banned') || fieldName.includes('banned') || fieldName.includes('locked')) {
+				element.textContent = value ? 'Yes' : 'No';
+				element.className = `badge ${value ? 'bg-danger' : 'bg-success'}`;
+			} else if (fieldName.includes('count') || fieldName.includes('level')) {
+				element.textContent = value || '-';
+			} else if (fieldName.includes('date') || fieldName.includes('created') || fieldName.includes('updated')) {
+				if (value) {
+					element.textContent = new Date(value * 1000).toLocaleString();
+				}
+			} else {
+				element.textContent = value || '-';
+			}
+		} catch (e) {
+			console.debug(`Error updating element for field ${fieldName}:`, e);
+		}
+	},
+
+	/**
+	 * Show toast notification
+	 */
+	ShowToast(title, message, type = 'info') {
+		try {
+			const toastEl = document.createElement('div');
+			toastEl.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show`;
+			toastEl.setAttribute('role', 'alert');
+			toastEl.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+
+			toastEl.innerHTML = `
+				<strong>${title}</strong><br>${message}
+				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+			`;
+
+			document.body.appendChild(toastEl);
+
+			setTimeout(() => {
+				toastEl.remove();
+			}, 4000);
+		} catch (e) {
+			console.log(`[${type}] ${title}: ${message}`);
+		}
+	}
+};
+
+// Export to global scope
+window.realtimeManager = realtimeManager;

dDashboardServer/templates/account-view.jinja2

@@ -11,7 +11,7 @@
 
 			<div class="card">
 				<div class="card-header">
-					<h2>Account #{{ account.id }} - {{ account.name }}</h2>
+					<h2>Account #{{ account.id }} - <span class="account-name">{{ account.name }}</span></h2>
 					<p class="text-muted">View account details and manage settings</p>
 				</div>
 				<div class="card-body">
@@ -23,7 +23,7 @@
 
 						<div class="detail-item">
 							<div class="detail-label">Username</div>
-							<div class="detail-value">{{ account.name }}</div>
+							<div class="detail-value"><span class="account-name">{{ account.name }}</span></div>
 						</div>
 
 						<div class="detail-item">
@@ -35,9 +35,9 @@
 							<div class="detail-label">GM Level</div>
 							<div class="detail-value">
 								{% if account.gm_level > 0 %}
-									<span class="badge badge-gm">GM {{ account.gm_level }}</span>
+									<span class="account-gm-level badge badge-gm">GM {{ account.gm_level }}</span>
 								{% else %}
-									<span class="badge badge-inactive">User</span>
+									<span class="account-gm-level badge badge-inactive">User</span>
 								{% endif %}
 							</div>
 						</div>
@@ -46,9 +46,9 @@
 							<div class="detail-label">Ban Status</div>
 							<div class="detail-value">
 								{% if account.banned %}
-									<span class="badge badge-banned">BANNED</span>
+									<span class="account-banned badge badge-banned">BANNED</span>
 								{% else %}
-									<span class="badge badge-active">Active</span>
+									<span class="account-banned badge badge-active">Active</span>
 								{% endif %}
 							</div>
 						</div>
@@ -57,9 +57,9 @@
 							<div class="detail-label">Lock Status</div>
 							<div class="detail-value">
 								{% if account.locked %}
-									<span class="badge badge-locked">LOCKED</span>
+									<span class="account-locked badge badge-locked">LOCKED</span>
 								{% else %}
-									<span class="badge badge-active">Unlocked</span>
+									<span class="account-locked badge badge-active">Unlocked</span>
 								{% endif %}
 							</div>
 						</div>
@@ -67,11 +67,13 @@
 						<div class="detail-item">
 							<div class="detail-label">Mute Expires</div>
 							<div class="detail-value">
-								{% if account.mute_expire > 0 %}
-									<span>{{ account.mute_expire }}</span>
-								{% else %}
-									<span class="text-muted">Not muted</span>
-								{% endif %}
+								<span class="account-mute-expire">
+									{% if account.mute_expire > 0 %}
+										Muted until {{ account.mute_expire }}
+									{% else %}
+										Not muted
+									{% endif %}
+								</span>
 							</div>
 						</div>
 					</div>
@@ -100,7 +102,18 @@
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
+		// Set current account for real-time detail panel updates
+		document.addEventListener('DOMContentLoaded', () => {
+			realtimeManager.SetCurrentEntity('account', {{ account.id }});
+
+			// Clean up when leaving the page
+			window.addEventListener('beforeunload', () => {
+				realtimeManager.ClearCurrentEntity();
+			});
+		});
+
 		function EditAccount() {
 			alert("Edit functionality coming soon");
 			// TODO: Open edit modal
@@ -110,6 +123,7 @@
 			if (confirm("Are you sure you want to ban this account?")) {
 				alert("Ban functionality coming soon");
 				// TODO: Call ban API endpoint
+				// After successful ban, call: BroadcastAccountUpdate({{ account.id }})
 			}
 		}
 
@@ -117,6 +131,7 @@
 			if (confirm("Are you sure you want to unban this account?")) {
 				alert("Unban functionality coming soon");
 				// TODO: Call unban API endpoint
+				// After successful unban, call: BroadcastAccountUpdate({{ account.id }})
 			}
 		}
 
@@ -124,6 +139,7 @@
 			if (confirm("Are you sure you want to lock this account?")) {
 				alert("Lock functionality coming soon");
 				// TODO: Call lock API endpoint
+				// After successful lock, call: BroadcastAccountUpdate({{ account.id }})
 			}
 		}
 
@@ -131,6 +147,7 @@
 			if (confirm("Are you sure you want to unlock this account?")) {
 				alert("Unlock functionality coming soon");
 				// TODO: Call unlock API endpoint
+				// After successful unlock, call: BroadcastAccountUpdate({{ account.id }})
 			}
 		}
 	</script>

dDashboardServer/templates/accounts.jinja2

@@ -7,12 +7,12 @@
 {% block content %}
 	<div class="accounts-container">
 		<div class="container-fluid">
-			<div class="table-card">
-				<div class="table-header">
-                    <h2 class="mb-0">Accounts</h2>
-                    <p class="text-muted">View and manage user accounts</p>
+			<div class="card">
+				<div class="card-header">
+					<h2>Accounts</h2>
+					<p class="text-muted">View and manage user accounts - <span class="account-count">0</span> total</p>
 				</div>
-				<div class="table-body">
+				<div class="card-body">
 					<div class="table-responsive">
 						<table id="accountsTable" class="table table-dark table-hover mb-0">
 							<thead>
@@ -39,10 +39,11 @@
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
 		$(document).ready(function() {
 			// Initialize DataTable with server-side processing
-			$('#accountsTable').DataTable({
+			const table = $('#accountsTable').DataTable({
 				processing: true,
 				serverSide: true,
 				pageLength: 25,
@@ -119,6 +120,25 @@
 				order: [[0, 'asc']],
 				stateSave: false
 			});
+
+			// Register table for real-time updates
+			realtimeManager.RegisterTable('account', table);
+
+			// Update account count when DataTable loads
+			table.on('draw.dt', function() {
+				const info = table.page.info();
+				const countEl = document.querySelector('.account-count');
+				if (countEl && info) {
+					countEl.textContent = info.recordsTotal;
+				}
+			});
+
+			// Initialize real-time listener when WebSocket is ready
+			const waitForWS = setInterval(() => {
+				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
+					clearInterval(waitForWS);
+				}
+			}, 100);
 		});
 
 		function viewAccount(id) {

dDashboardServer/templates/base.jinja2

@@ -28,6 +28,40 @@
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
 	<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.3.7/b-3.2.6/fh-4.0.6/sc-2.4.3/datatables.min.js" integrity="sha384-BPUXtS4tH3onFfu5m+dPbFfpLOXQwSWGwrsNWxOAAwqqJx6tJHhFkGF6uitrmEui" crossorigin="anonymous"></script>
+	<script>
+		// Global logout function (available on all pages)
+		function deleteCookie(name) {
+			document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict`;
+		}
+
+		function logout() {
+			deleteCookie('dashboardToken');
+			deleteCookie('gmLevel');
+			localStorage.removeItem('dashboardToken');
+			window.location.href = '/login';
+		}
+
+		// Setup logout button
+		document.addEventListener('DOMContentLoaded', () => {
+			const logoutBtn = document.getElementById('logoutBtn');
+			if (logoutBtn) {
+				logoutBtn.addEventListener('click', (e) => {
+					e.preventDefault();
+					logout();
+				});
+			}
+		});
+	</script>
+	
+	<!-- Load dashboard.js only on dashboard pages (not on login) -->
+	<script>
+		const isLoginPage = document.querySelector('.login-container') !== null;
+		if (!isLoginPage) {
+			const script = document.createElement('script');
+			script.src = '/js/dashboard.js';
+			document.head.appendChild(script);
+		}
+	</script>
 
 	{% block scripts %}{% endblock %}
 </body>

dDashboardServer/templates/bug_reports.jinja2

@@ -6,12 +6,13 @@
 
 {% block content %}
 	<div class="bug-reports-container">
-		<div class="table-card">
-			<div class="table-header">
-				<h2 class="mb-0">Bug Reports</h2>
-				<p class="text-muted">View and manage bug reports from players</p>
-			</div>
-			<div class="table-body">
+		<div class="container-fluid">
+			<div class="card">
+				<div class="card-header">
+					<h2>Bug Reports <span class="bug_report-count">0</span></h2>
+					<p class="text-muted">View and manage bug reports from players</p>
+				</div>
+				<div class="card-body">
 				<table id="bugReportsTable" class="table table-dark table-striped table-hover">
 					<thead>
 						<tr>
@@ -27,16 +28,18 @@
 						<!-- Data populated by DataTables -->
 					</tbody>
 				</table>
+				</div>
 			</div>
 		</div>
 	</div>
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
 		$(document).ready(function() {
 			// Initialize DataTable with server-side processing
-			$('#bugReportsTable').DataTable({
+			const table = $('#bugReportsTable').DataTable({
 				processing: true,
 				serverSide: true,
 				pageLength: 25,
@@ -80,6 +83,25 @@
 				order: [[0, 'desc']],
 				stateSave: false
 			});
+
+			// Register table for real-time updates
+			realtimeManager.RegisterTable('bug_report', table);
+
+			// Update bug report count on table draw
+			table.on('draw.dt', function() {
+				const info = table.page.info();
+				const countEl = document.querySelector('.bug_report-count');
+				if (countEl && info) {
+					countEl.textContent = info.recordsTotal;
+				}
+			});
+
+			// Initialize real-time listener when WebSocket is ready
+			const waitForWS = setInterval(() => {
+				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
+					clearInterval(waitForWS);
+				}
+			}, 100);
 		});
 
 		function viewReport(id) {

dDashboardServer/templates/characters.jinja2

@@ -6,12 +6,13 @@
 
 {% block content %}
 	<div class="characters-container">
-		<div class="table-card">
-			<div class="table-header">
-				<h2 class="mb-0">Characters</h2>
-				<p class="text-muted">View and manage player characters</p>
-			</div>
-			<div class="table-body">
+		<div class="container-fluid">
+			<div class="card">
+				<div class="card-header">
+					<h2>Characters</h2>
+					<p class="text-muted">View and manage player characters - <span class="character-count">0</span> total</p>
+				</div>
+				<div class="card-body">
 				<table id="charactersTable" class="table table-dark table-striped table-hover">
 					<thead>
 						<tr>
@@ -26,16 +27,18 @@
 						<!-- Data populated by DataTables -->
 					</tbody>
 				</table>
+				</div>
 			</div>
 		</div>
 	</div>
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
 		$(document).ready(function() {
 			// Initialize DataTable with server-side processing
-			$('#charactersTable').DataTable({
+			const table = $('#charactersTable').DataTable({
 				processing: true,
 				serverSide: true,
 				pageLength: 25,
@@ -75,6 +78,25 @@
 				order: [[0, 'asc']],
 				stateSave: false
 			});
+
+			// Register table for real-time updates
+			realtimeManager.RegisterTable('character', table);
+
+			// Update character count when DataTable loads
+			table.on('draw.dt', function() {
+				const info = table.page.info();
+				const countEl = document.querySelector('.character-count');
+				if (countEl && info) {
+					countEl.textContent = info.recordsTotal;
+				}
+			});
+
+			// Initialize WebSocket realtime updates
+			const waitForWS = setInterval(() => {
+				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
+					clearInterval(waitForWS);
+				}
+			}, 100);
 		});
 
 		function viewCharacter(id) {

dDashboardServer/templates/header.jinja2

@@ -1,5 +1,5 @@
 {# Navigation #}
-<nav class="navbar navbar-dark bg-dark flex-column" style="width: 280px; height: 100vh; position: fixed; left: 0; top: 0; overflow-y: auto;">
+<nav class="navbar navbar-dark bg-dark flex-column">
 	<div class="p-3">
 		<a class="navbar-brand fw-bold" href="/">🎮 DarkflameServer</a>
 	</div>

dDashboardServer/templates/index.jinja2

@@ -3,33 +3,33 @@
 {% block title %}Dashboard - DarkflameServer{% endblock %}
 
 {% block content %}
-	<!-- Main Content -->
-	<main style="margin-left: 280px;">
-		<div class="container-fluid p-3 p-md-4">
-
-			<div class="row g-3">
-				{% include "server_status.jinja2" %}
-				{% include "statistics.jinja2" %}
-			</div>
-
-			{% include "world_instances.jinja2" %}
+<div class="container-fluid py-5 px-4">
+	<div class="dashboard-header mb-4">
+		<div>
+			<h1>Welcome to DarkflameServer Dashboard</h1>
+			<p class="text-muted">Real-time server monitoring and administration</p>
 		</div>
-	</main>
+	</div>
+
+	<div class="row g-3">
+		{% include "server_status.jinja2" %}
+		{% include "statistics.jinja2" %}
+	</div>
+
+	{% include "world_instances.jinja2" %}
+</div>
 {% endblock %}
 
 {% block scripts %}
-	<script src="/js/dashboard.js"></script>
 	<script>
-		// Check authentication and initialize dashboard
+		// Initialize dashboard when dashboard.js is loaded
 		document.addEventListener('DOMContentLoaded', () => {
-			// checkAuthentication is now async and calls connectWebSocket when ready
-			checkAuthentication();
-			
-			// Setup logout button
-			document.getElementById('logoutBtn').addEventListener('click', (e) => {
-				e.preventDefault();
-				logout();
-			});
+			// Wait a bit for dashboard.js to load
+			setTimeout(() => {
+				if (typeof checkAuthentication === 'function') {
+					checkAuthentication();
+				}
+			}, 100);
 		});
 	</script>
 {% endblock %}

dDashboardServer/templates/login.jinja2

@@ -2,50 +2,62 @@
 
 {% block title %}Dashboard Login - DarkflameServer{% endblock %}
 
-{% block extra_css %}
+{% block css %}
 	<link rel="stylesheet" href="/css/login.css">
 {% endblock %}
 
 {% block content %}
-	<div class="min-vh-100 d-flex align-items-center justify-content-center">
-		<div class="container">
-			<div class="row justify-content-center">
-				<div class="col-md-6 col-lg-5">
-					<div class="card shadow-lg border-0">
-						<div class="card-body p-5">
-							<h1 class="text-center mb-4">🎮 DarkflameServer</h1>
-							
-							<div id="alert" class="alert" role="alert" style="display: none;"></div>
-							
-							<form id="loginForm">
-								<div class="mb-3">
-									<label for="username" class="form-label">Username</label>
-									<input type="text" class="form-control" id="username" name="username" required autofocus>
-								</div>
-								
-								<div class="mb-3">
-									<label for="password" class="form-label">Password</label>
-									<input type="password" class="form-control" id="password" name="password" required maxlength="40">
-								</div>
-								
-								<div class="mb-3 form-check">
-									<input type="checkbox" class="form-check-input" id="rememberMe" name="rememberMe">
-									<label class="form-check-label" for="rememberMe">
-										Remember me for 30 days
-									</label>
-								</div>
-								
-								<button type="submit" class="btn btn-primary w-100" id="loginBtn">
-									<span id="loading" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" style="display: none;"></span>
-									<span>Login</span>
-								</button>
-							</form>
-						</div>
+<div class="login-container">
+	<div class="login-wrapper">
+		<div class="login-left">
+			<div class="login-branding">
+				<div class="logo">⚙️</div>
+				<h1>DarkflameServer</h1>
+				<p>Administration Dashboard</p>
+			</div>
+			<div class="login-info">
+				<h3>Welcome Back</h3>
+				<p>Manage your DarkflameServer infrastructure with ease. Secure access to server administration tools.</p>
+			</div>
+		</div>
+
+		<div class="login-right">
+			<div class="login-form-wrapper">
+				<h2>Sign In</h2>
+				
+				<div id="alert" class="alert-box" role="alert" style="display: none;"></div>
+				
+				<form id="loginForm" class="login-form">
+					<div class="form-group">
+						<label for="username">Username</label>
+						<input type="text" id="username" name="username" required autofocus placeholder="Enter your username">
+						<div class="form-focus"></div>
 					</div>
+					
+					<div class="form-group">
+						<label for="password">Password</label>
+						<input type="password" id="password" name="password" required maxlength="40" placeholder="Enter your password">
+						<div class="form-focus"></div>
+					</div>
+					
+					<div class="form-checkbox">
+						<input type="checkbox" id="rememberMe" name="rememberMe">
+						<label for="rememberMe">Remember me for 30 days</label>
+					</div>
+					
+					<button type="submit" class="btn-login" id="loginBtn">
+						<span id="loading" class="spinner" style="display: none;"></span>
+						<span class="btn-text">Sign In</span>
+					</button>
+				</form>
+				
+				<div class="login-footer">
+					<p>Contact your administrator if you don't have access</p>
 				</div>
 			</div>
 		</div>
 	</div>
+</div>
 {% endblock %}
 
 {% block scripts %}

dDashboardServer/templates/play_keys.jinja2

@@ -6,12 +6,13 @@
 
 {% block content %}
 	<div class="play-keys-container">
-		<div class="table-card">
-			<div class="table-header">
-				<h2 class="mb-0">Play Keys</h2>
-				<p class="text-muted">View and manage play keys</p>
-			</div>
-			<div class="table-body">
+		<div class="container-fluid">
+			<div class="card">
+				<div class="card-header">
+					<h2>Play Keys <span class="play_key-count">0</span></h2>
+					<p class="text-muted">View and manage play keys</p>
+				</div>
+				<div class="card-body">
 				<table id="playKeysTable" class="table table-dark table-striped table-hover">
 					<thead>
 						<tr>
@@ -27,16 +28,18 @@
 						<!-- Data populated by DataTables -->
 					</tbody>
 				</table>
+				</div>
 			</div>
 		</div>
 	</div>
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
 		$(document).ready(function() {
 			// Initialize DataTable with server-side processing
-			$('#playKeysTable').DataTable({
+			const table = $('#playKeysTable').DataTable({
 				processing: true,
 				serverSide: true,
 				pageLength: 25,
@@ -80,6 +83,25 @@
 				order: [[0, 'asc']],
 				stateSave: false
 			});
+
+			// Register table for real-time updates
+			realtimeManager.RegisterTable('play_key', table);
+
+			// Update play key count on table draw
+			table.on('draw.dt', function() {
+				const info = table.page.info();
+				const countEl = document.querySelector('.play_key-count');
+				if (countEl && info) {
+					countEl.textContent = info.recordsTotal;
+				}
+			});
+
+			// Initialize real-time listener when WebSocket is ready
+			const waitForWS = setInterval(() => {
+				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
+					clearInterval(waitForWS);
+				}
+			}, 100);
 		});
 
 		function viewKey(id) {

dDashboardServer/templates/properties.jinja2

@@ -6,12 +6,13 @@
 
 {% block content %}
 	<div class="properties-container">
-		<div class="table-card">
-			<div class="table-header">
-				<h2 class="mb-0">Properties</h2>
-				<p class="text-muted">View and manage player properties</p>
-			</div>
-			<div class="table-body">
+		<div class="container-fluid">
+			<div class="card">
+				<div class="card-header">
+					<h2>Properties <span class="property-count">0</span></h2>
+					<p class="text-muted">View and manage player properties</p>
+				</div>
+				<div class="card-body">
 				<table id="propertiesTable" class="table table-dark table-striped table-hover">
 					<thead>
 						<tr>
@@ -28,16 +29,18 @@
 						<!-- Data populated by DataTables -->
 					</tbody>
 				</table>
+				</div>
 			</div>
 		</div>
 	</div>
 {% endblock %}
 
 {% block scripts %}
+	<script src="/js/realtime.js"></script>
 	<script>
 		$(document).ready(function() {
 			// Initialize DataTable with server-side processing
-			$('#propertiesTable').DataTable({
+			const table = $('#propertiesTable').DataTable({
 				processing: true,
 				serverSide: true,
 				pageLength: 25,
@@ -77,6 +80,25 @@
 				order: [[0, 'asc']],
 				stateSave: false
 			});
+
+			// Register table for real-time updates
+			realtimeManager.RegisterTable('property', table);
+
+			// Update property count on table draw
+			table.on('draw.dt', function() {
+				const info = table.page.info();
+				const countEl = document.querySelector('.property-count');
+				if (countEl && info) {
+					countEl.textContent = info.recordsTotal;
+				}
+			});
+
+			// Initialize real-time listener when WebSocket is ready
+			const waitForWS = setInterval(() => {
+				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
+					clearInterval(waitForWS);
+				}
+			}, 100);
 		});
 
 		function viewProperty(id) {

dDashboardServer/templates/server_status.jinja2

@@ -1,28 +1,28 @@
 <div class="col-md-6 col-lg-4">
-	<div class="card border-0 shadow-sm h-100">
-		<div class="card-header bg-light">
+	<div class="card h-100">
+		<div class="card-header">
 			<h5 class="mb-0">Server Status</h5>
 		</div>
 		<div class="card-body">
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<span>Auth Server</span>
 				{% if auth.online %}
-					<span class="badge bg-success" id="auth-status">Online</span>
+					<span class="badge badge-active" id="auth-status">Online</span>
 				{% else %}
-					<span class="badge bg-danger" id="auth-status">Offline</span>
+					<span class="badge badge-banned" id="auth-status">Offline</span>
 				{% endif %}
 			</div>
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<span>Chat Server</span>
 				{% if chat.online %}
-					<span class="badge bg-success" id="chat-status">Online</span>
+					<span class="badge badge-active" id="chat-status">Online</span>
 				{% else %}
-					<span class="badge bg-danger" id="chat-status">Offline</span>
+					<span class="badge badge-banned" id="chat-status">Offline</span>
 				{% endif %}
 			</div>
 			<div class="d-flex justify-content-between align-items-center">
 				<span>Active Worlds</span>
-				<span class="badge bg-primary" id="world-count">{{ length(worlds) }}</span>
+				<span class="badge badge-primary" id="world-count">{{ length(worlds) }}</span>
 			</div>
 		</div>
 	</div>

dDashboardServer/templates/statistics.jinja2

@@ -1,20 +1,20 @@
 <div class="col-md-6 col-lg-4">
-	<div class="card border-0 shadow-sm h-100">
-		<div class="card-header bg-light">
+	<div class="card h-100">
+		<div class="card-header">
 			<h5 class="mb-0">Statistics</h5>
 		</div>
 		<div class="card-body">
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<span>Online Players</span>
-				<span class="badge bg-info" id="online-players">{{ stats.onlinePlayers }}</span>
+				<span class="badge badge-primary" id="online-players">{{ stats.onlinePlayers }}</span>
 			</div>
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<span>Total Accounts</span>
-				<span class="badge bg-info" id="total-accounts">{{ stats.totalAccounts }}</span>
+				<span class="badge badge-primary" id="total-accounts">{{ stats.totalAccounts }}</span>
 			</div>
 			<div class="d-flex justify-content-between align-items-center">
 				<span>Total Characters</span>
-				<span class="badge bg-info" id="total-characters">{{ stats.totalCharacters }}</span>
+				<span class="badge badge-primary" id="total-characters">{{ stats.totalCharacters }}</span>
 			</div>
 		</div>
 	</div>

dDashboardServer/templates/world_instances.jinja2

@@ -1,6 +1,6 @@
-<div class="card border-0 shadow-sm mt-4">
-	<div class="card-header bg-light">
-		<h5 class="mb-0">Active World Instances</h5>
+<div class="card mt-4">
+	<div class="card-header">
+		<h2>Active World Instances</h2>
 	</div>
 	<div class="card-body">
 		<div id="world-list">
@@ -8,8 +8,8 @@
 				<p class="text-muted text-center mb-0">No active world instances</p>
 			{% else %}
 				<div class="table-responsive">
-					<table class="table table-sm mb-0">
-						<thead class="table-light">
+					<table class="table table-dark table-hover mb-0">
+						<thead>
 							<tr>
 								<th>Zone</th>
 								<th>Instance</th>
@@ -24,8 +24,8 @@
 								<td>{{ world.mapID }}</td>
 								<td>{{ world.instanceID }}</td>
 								<td>{{ world.cloneID }}</td>
-								<td><span class="badge bg-secondary">{{ world.players }}</span></td>
-								<td>{% if world.isPrivate %}<span class="badge bg-warning">Private</span>{% else %}<span class="badge bg-primary">Public</span>{% endif %}</td>
+								<td><span class="badge badge-primary">{{ world.players }}</span></td>
+								<td>{% if world.isPrivate %}<span class="badge badge-warning">Private</span>{% else %}<span class="badge badge-success">Public</span>{% endif %}</td>
 							</tr>
 							{% endfor %}
 						</tbody>