803 lines
26 KiB
HTML
803 lines
26 KiB
HTML
<!-- <!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Logs</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://kit.fontawesome.com/a82697a287.js" crossorigin="anonymous"></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.log-item {
|
|
position: relative;
|
|
max-height: 10rem;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
}
|
|
|
|
.log-text {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.log-item:hover {
|
|
max-height: none;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.log-item:hover .log-text {
|
|
white-space: normal;
|
|
}
|
|
|
|
.custom-select {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-weight: 600;
|
|
padding-right: 2.5rem;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
.custom-select:hover {
|
|
border-color: #4f46e5;
|
|
background-color: rgba(79, 70, 229, 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.custom-select:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.refresh-button {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s ease;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.refresh-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg,
|
|
rgba(79, 70, 229, 0.1) 0%,
|
|
rgba(79, 70, 229, 0) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
border-color: #4f46e5;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
|
|
}
|
|
|
|
.refresh-button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.refresh-button:hover i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.refresh-button i {
|
|
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.controls-wrapper {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
padding: 0.5rem;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans">
|
|
<div class="max-w-5xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12">
|
|
<div class="flex items-center justify-between mb-12">
|
|
<div>
|
|
<h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Query Logs</h1>
|
|
<p class="text-gray-500 mt-2">Monitor and track system queries</p>
|
|
</div>
|
|
|
|
<div class="controls-wrapper">
|
|
<button onclick="location.reload()" class="refresh-button" title="Refresh logs">
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
|
|
<div class="relative">
|
|
<select id="month" onchange="changeMonth()" class="custom-select w-48 px-6 py-3 rounded-xl text-sm font-medium">
|
|
<option value="january" {{ if eq .Month "january" }}selected{{ end }}>January</option>
|
|
<option value="february" {{ if eq .Month "february" }}selected{{ end }}>February</option>
|
|
<option value="march" {{ if eq .Month "march" }}selected{{ end }}>March</option>
|
|
<option value="april" {{ if eq .Month "april" }}selected{{ end }}>April</option>
|
|
<option value="may" {{ if eq .Month "may" }}selected{{ end }}>May</option>
|
|
<option value="june" {{ if eq .Month "june" }}selected{{ end }}>June</option>
|
|
<option value="july" {{ if eq .Month "july" }}selected{{ end }}>July</option>
|
|
<option value="august" {{ if eq .Month "august" }}selected{{ end }}>August</option>
|
|
<option value="september" {{ if eq .Month "september" }}selected{{ end }}>September</option>
|
|
<option value="october" {{ if eq .Month "october" }}selected{{ end }}>October</option>
|
|
<option value="november" {{ if eq .Month "november" }}selected{{ end }}>November</option>
|
|
<option value="december" {{ if eq .Month "december" }}selected{{ end }}>December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="space-y-6">
|
|
{{ range .Logs }}
|
|
<li class="log-item p-6 glass-effect rounded-2xl hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-all">
|
|
<div class="flex items-center gap-2 text-indigo-600 mb-3">
|
|
<i class="fa-solid fa-terminal text-sm"></i>
|
|
<span class="font-semibold">Log Entry</span>
|
|
</div>
|
|
<pre class="text-sm whitespace-pre-wrap break-words log-text">{{ . }}</pre>
|
|
</li>
|
|
{{ else }}
|
|
<li class="p-8 glass-effect rounded-2xl text-center">
|
|
<i class="fa-solid fa-inbox text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500">No logs found for this month.</p>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const monthSelect = document.getElementById("month");
|
|
if (!monthSelect.value) {
|
|
const currentMonthIndex = new Date().getMonth();
|
|
const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
|
|
monthSelect.value = months[currentMonthIndex];
|
|
}
|
|
});
|
|
|
|
function changeMonth() {
|
|
const selectedMonth = document.getElementById("month").value;
|
|
window.location.href = `/logs/${selectedMonth}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Logs - Admin</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script
|
|
src="https://kit.fontawesome.com/a82697a287.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.log-item {
|
|
position: relative;
|
|
max-height: 10rem;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
}
|
|
|
|
.log-text {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.log-item:hover {
|
|
max-height: none;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.log-item:hover .log-text {
|
|
white-space: normal;
|
|
}
|
|
|
|
.custom-select {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-weight: 600;
|
|
padding-right: 2.5rem;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
.custom-select:hover {
|
|
border-color: #4f46e5;
|
|
background-color: rgba(79, 70, 229, 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.custom-select:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.refresh-button {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s ease;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.refresh-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(79, 70, 229, 0.1) 0%,
|
|
rgba(79, 70, 229, 0) 100%
|
|
);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
border-color: #4f46e5;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
|
|
}
|
|
|
|
.refresh-button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.refresh-button:hover i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.refresh-button i {
|
|
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.controls-wrapper {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
padding: 0.5rem;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.login-container {
|
|
max-width: 400px;
|
|
margin: 100px auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.error-message {
|
|
background: #fee2e2;
|
|
border: 1px solid #fecaca;
|
|
color: #dc2626;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans">
|
|
<!-- Login Section -->
|
|
<div
|
|
id="loginSection"
|
|
class="max-w-md mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 login-container"
|
|
>
|
|
<div class="text-center mb-8">
|
|
<h1
|
|
class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2"
|
|
>
|
|
Admin Logs
|
|
</h1>
|
|
<p class="text-gray-500">Login to access system logs</p>
|
|
</div>
|
|
|
|
<form id="loginForm" onsubmit="login(event)">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm font-medium text-gray-700 mb-2"
|
|
>Email</label
|
|
>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
required
|
|
placeholder="admin@example.com"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="password"
|
|
class="block text-sm font-medium text-gray-700 mb-2"
|
|
>Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
required
|
|
placeholder="Enter your password"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" id="loginBtn" class="btn-primary mt-6">
|
|
<span id="loginText">Login</span>
|
|
<span id="loginLoading" class="hidden">
|
|
<i class="fa-solid fa-spinner fa-spin"></i> Logging in...
|
|
</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div id="errorMessage" class="error-message hidden"></div>
|
|
</div>
|
|
|
|
<!-- Logs Section (Hidden until login) -->
|
|
<div id="logsSection" class="hidden">
|
|
<div
|
|
class="max-w-5xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12"
|
|
>
|
|
<div class="flex items-center justify-between mb-12">
|
|
<div class="flex items-center gap-4">
|
|
<div>
|
|
<h1
|
|
class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent"
|
|
>
|
|
Query Logs
|
|
</h1>
|
|
<p class="text-gray-500 mt-2">Monitor and track system queries</p>
|
|
</div>
|
|
<!-- <span
|
|
class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium"
|
|
>
|
|
<i class="fa-solid fa-circle-check mr-1"></i> Admin
|
|
</span> -->
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="controls-wrapper">
|
|
<button
|
|
onclick="refreshLogs()"
|
|
class="refresh-button"
|
|
title="Refresh logs"
|
|
>
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
|
|
<div class="relative">
|
|
<select
|
|
id="month"
|
|
onchange="changeMonth()"
|
|
class="custom-select w-48 px-6 py-3 rounded-xl text-sm font-medium"
|
|
>
|
|
<option value="january">January</option>
|
|
<option value="february">February</option>
|
|
<option value="march">March</option>
|
|
<option value="april">April</option>
|
|
<option value="may">May</option>
|
|
<option value="june">June</option>
|
|
<option value="july">July</option>
|
|
<option value="august">August</option>
|
|
<option value="september">September</option>
|
|
<option value="october">October</option>
|
|
<option value="november">November</option>
|
|
<option value="december">December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onclick="logout()"
|
|
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-xl transition-all flex items-center gap-2"
|
|
>
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="logsContent">
|
|
<!-- Logs will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = "/api/v1/auth";
|
|
const LOGS_BASE = "/api/v1/logs";
|
|
|
|
// Check if already logged in on page load
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const token = localStorage.getItem("admin_token");
|
|
if (token) {
|
|
showLogsSection();
|
|
loadLogs();
|
|
} else {
|
|
showLoginSection();
|
|
}
|
|
|
|
// Set current month as default
|
|
const currentMonthIndex = new Date().getMonth();
|
|
const months = [
|
|
"january",
|
|
"february",
|
|
"march",
|
|
"april",
|
|
"may",
|
|
"june",
|
|
"july",
|
|
"august",
|
|
"september",
|
|
"october",
|
|
"november",
|
|
"december",
|
|
];
|
|
document.getElementById("month").value = months[currentMonthIndex];
|
|
});
|
|
|
|
async function login(event) {
|
|
event.preventDefault();
|
|
|
|
const email = document.getElementById("email").value;
|
|
const password = document.getElementById("password").value;
|
|
const loginBtn = document.getElementById("loginBtn");
|
|
const loginText = document.getElementById("loginText");
|
|
const loginLoading = document.getElementById("loginLoading");
|
|
const errorMessage = document.getElementById("errorMessage");
|
|
|
|
// Show loading state
|
|
loginBtn.disabled = true;
|
|
loginText.classList.add("hidden");
|
|
loginLoading.classList.remove("hidden");
|
|
errorMessage.classList.add("hidden");
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/login`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
// Read raw text first to avoid 'Unexpected token <' when server returns HTML
|
|
const raw = await response.text();
|
|
let data = null;
|
|
try {
|
|
data = JSON.parse(raw);
|
|
} catch (e) {
|
|
// non-JSON response (HTML/error page) — keep raw for logging
|
|
console.warn("Non-JSON response:", raw);
|
|
}
|
|
|
|
console.log("Data response login:", data || raw);
|
|
|
|
if (!response.ok) {
|
|
const message =
|
|
(data && data.message) || `Request failed (${response.status})`;
|
|
throw new Error(message);
|
|
}
|
|
|
|
// Extract token supporting both shapes: { access_token } or { data: { access_token } }
|
|
const token =
|
|
(data && data.access_token) ||
|
|
(data && data.data && data.data.access_token);
|
|
|
|
if (!token) {
|
|
throw new Error("Login succeeded but no access token returned");
|
|
}
|
|
|
|
localStorage.setItem("admin_token", token);
|
|
|
|
// Show logs section
|
|
showLogsSection();
|
|
loadLogs();
|
|
} catch (error) {
|
|
errorMessage.textContent = error.message;
|
|
errorMessage.classList.remove("hidden");
|
|
} finally {
|
|
// Reset loading state
|
|
loginBtn.disabled = false;
|
|
loginText.classList.remove("hidden");
|
|
loginLoading.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
function showLoginSection() {
|
|
document.getElementById("loginSection").classList.remove("hidden");
|
|
document.getElementById("logsSection").classList.add("hidden");
|
|
}
|
|
|
|
function showLogsSection() {
|
|
document.getElementById("loginSection").classList.add("hidden");
|
|
document.getElementById("logsSection").classList.remove("hidden");
|
|
}
|
|
|
|
async function loadLogs(month = null) {
|
|
const logsContent = document.getElementById("logsContent");
|
|
const token = localStorage.getItem("admin_token");
|
|
|
|
if (!token) {
|
|
showLoginSection();
|
|
return;
|
|
}
|
|
|
|
const selectedMonth = month || document.getElementById("month").value;
|
|
|
|
try {
|
|
logsContent.innerHTML = `
|
|
<div class="text-center py-8">
|
|
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
|
<p class="text-gray-500">Loading logs...</p>
|
|
</div>
|
|
`;
|
|
|
|
const response = await fetch(`${LOGS_BASE}/${selectedMonth}`, {
|
|
headers: {
|
|
Accept: "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
// read raw and try parse JSON (avoid "Unexpected token '<'")
|
|
const raw = await response.text();
|
|
let payload = null;
|
|
try {
|
|
payload = JSON.parse(raw);
|
|
} catch (e) {
|
|
payload = raw; // fallback to raw HTML/text
|
|
console.warn("Non-JSON logs response:", raw);
|
|
}
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
localStorage.removeItem("admin_token");
|
|
showLoginSection();
|
|
throw new Error("Session expired. Please login again.");
|
|
}
|
|
|
|
if (!response.ok) {
|
|
const message =
|
|
(payload && payload.message) ||
|
|
`Request failed (${response.status})`;
|
|
throw new Error(message);
|
|
}
|
|
|
|
// normalize logs array from possible response shapes
|
|
let logs = [];
|
|
if (Array.isArray(payload)) {
|
|
logs = payload;
|
|
} else if (
|
|
payload &&
|
|
payload.data &&
|
|
Array.isArray(payload.data.logs)
|
|
) {
|
|
logs = payload.data.logs;
|
|
} else if (payload && Array.isArray(payload.logs)) {
|
|
logs = payload.logs;
|
|
}
|
|
|
|
displayLogs(logs);
|
|
} catch (error) {
|
|
logsContent.innerHTML = `
|
|
<div class="error-message text-center">
|
|
<i class="fa-solid fa-exclamation-triangle mr-2"></i>
|
|
${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function displayLogs(logsOrPayload) {
|
|
const logsContent = document.getElementById("logsContent");
|
|
|
|
// Normalize input ke array logs
|
|
let logs = [];
|
|
if (!logsOrPayload) {
|
|
logs = [];
|
|
} else if (Array.isArray(logsOrPayload)) {
|
|
logs = logsOrPayload;
|
|
} else if (
|
|
logsOrPayload.data &&
|
|
Array.isArray(logsOrPayload.data.logs)
|
|
) {
|
|
logs = logsOrPayload.data.logs;
|
|
} else if (Array.isArray(logsOrPayload.logs)) {
|
|
logs = logsOrPayload.logs;
|
|
} else if (typeof logsOrPayload === "object") {
|
|
// support wrapper like { month, logs, total } or { status, message, data: { logs } }
|
|
if (Array.isArray(logsOrPayload.logs)) logs = logsOrPayload.logs;
|
|
else if (logsOrPayload.data && Array.isArray(logsOrPayload.data.logs))
|
|
logs = logsOrPayload.data.logs;
|
|
else logs = [];
|
|
}
|
|
|
|
// Clear area
|
|
logsContent.innerHTML = "";
|
|
|
|
if (!logs || logs.length === 0) {
|
|
logsContent.innerHTML = `
|
|
<div class="p-8 glass-effect rounded-2xl text-center">
|
|
<i class="fa-solid fa-inbox text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500">No logs found for this month.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement("ul");
|
|
ul.className = "space-y-6";
|
|
|
|
logs.forEach((log) => {
|
|
const li = document.createElement("li");
|
|
li.className =
|
|
"log-item p-6 glass-effect rounded-2xl hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-all";
|
|
|
|
const header = document.createElement("div");
|
|
header.className = "flex items-center gap-2 text-indigo-600 mb-3";
|
|
header.innerHTML = `<i class="fa-solid fa-terminal text-sm"></i><span class="font-semibold">Log Entry</span>`;
|
|
|
|
const pre = document.createElement("pre");
|
|
pre.className = "text-sm whitespace-pre-wrap break-words log-text";
|
|
// gunakan textContent agar aman dari HTML injection
|
|
if (typeof log === "string") {
|
|
pre.textContent = log;
|
|
} else {
|
|
try {
|
|
pre.textContent = JSON.stringify(log, null, 2);
|
|
} catch (e) {
|
|
pre.textContent = String(log);
|
|
}
|
|
}
|
|
|
|
li.appendChild(header);
|
|
li.appendChild(pre);
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
logsContent.appendChild(ul);
|
|
}
|
|
|
|
function changeMonth() {
|
|
const selectedMonth = document.getElementById("month").value;
|
|
loadLogs(selectedMonth);
|
|
}
|
|
|
|
function refreshLogs() {
|
|
loadLogs();
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem("admin_token");
|
|
showLoginSection();
|
|
|
|
// Clear form
|
|
document.getElementById("email").value = "";
|
|
document.getElementById("password").value = "";
|
|
document.getElementById("errorMessage").classList.add("hidden");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|