2025-12-19 20:44:46 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<meta name="description" content="Sky Art Shop - Admin Dashboard" />
|
|
|
|
|
<title>Dashboard - Sky Art Shop Admin</title>
|
2026-01-19 01:17:43 -06:00
|
|
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
2025-12-19 20:44:46 -06:00
|
|
|
|
|
|
|
|
<!-- Bootstrap CSS -->
|
|
|
|
|
<link
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- Custom CSS -->
|
|
|
|
|
<link rel="stylesheet" href="css/admin-style.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/utilities.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Skip to main content link for accessibility -->
|
|
|
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
<aside class="sidebar" role="navigation" aria-label="Admin navigation">
|
|
|
|
|
<div class="sidebar-brand">
|
|
|
|
|
<i class="bi bi-shop" aria-hidden="true"></i> SkyArt Admin
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="sidebar-menu">
|
|
|
|
|
<li>
|
|
|
|
|
<a href="dashboard.html" class="active" aria-current="page">
|
|
|
|
|
<i class="bi bi-speedometer2" aria-hidden="true"></i>
|
|
|
|
|
<span>Dashboard</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="products.html">
|
|
|
|
|
<i class="bi bi-box-seam" aria-hidden="true"></i>
|
|
|
|
|
<span>Products</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="portfolio.html">
|
|
|
|
|
<i class="bi bi-images" aria-hidden="true"></i>
|
|
|
|
|
<span>Portfolio</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="blog.html">
|
|
|
|
|
<i class="bi bi-file-text" aria-hidden="true"></i>
|
|
|
|
|
<span>Blog</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="pages.html">
|
|
|
|
|
<i class="bi bi-file-earmark" aria-hidden="true"></i>
|
|
|
|
|
<span>Pages</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="users.html">
|
|
|
|
|
<i class="bi bi-people" aria-hidden="true"></i>
|
|
|
|
|
<span>Users</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="settings.html">
|
|
|
|
|
<i class="bi bi-gear" aria-hidden="true"></i>
|
|
|
|
|
<span>Settings</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" onclick="logout(); return false;">
|
|
|
|
|
<i class="bi bi-box-arrow-right" aria-hidden="true"></i>
|
|
|
|
|
<span>Logout</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
|
|
<main class="main-content" id="main-content">
|
|
|
|
|
<header class="top-bar">
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Dashboard</h1>
|
|
|
|
|
<p class="text-muted">Welcome back! Here's what's happening.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span id="userGreeting" aria-live="polite"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- Stats Grid -->
|
|
|
|
|
<section class="stats-grid" aria-label="Statistics overview">
|
|
|
|
|
<article class="stat-card">
|
|
|
|
|
<div class="stat-icon" style="background: #667eea" aria-hidden="true">
|
|
|
|
|
<i class="bi bi-box-seam"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Products</h3>
|
|
|
|
|
<p
|
|
|
|
|
class="stat-value"
|
|
|
|
|
id="totalProducts"
|
|
|
|
|
aria-label="Total products"
|
|
|
|
|
>
|
|
|
|
|
<span class="spinner spinner-small"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class="stat-card">
|
|
|
|
|
<div class="stat-icon" style="background: #28a745" aria-hidden="true">
|
|
|
|
|
<i class="bi bi-images"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Portfolio Items</h3>
|
|
|
|
|
<p
|
|
|
|
|
class="stat-value"
|
|
|
|
|
id="totalPortfolio"
|
|
|
|
|
aria-label="Total portfolio items"
|
|
|
|
|
>
|
|
|
|
|
<span class="spinner spinner-small"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class="stat-card">
|
|
|
|
|
<div class="stat-icon" style="background: #17a2b8" aria-hidden="true">
|
|
|
|
|
<i class="bi bi-file-text"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Blog Posts</h3>
|
|
|
|
|
<p
|
|
|
|
|
class="stat-value"
|
|
|
|
|
id="totalBlogPosts"
|
|
|
|
|
aria-label="Total blog posts"
|
|
|
|
|
>
|
|
|
|
|
<span class="spinner spinner-small"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class="stat-card">
|
|
|
|
|
<div class="stat-icon" style="background: #ffc107" aria-hidden="true">
|
|
|
|
|
<i class="bi bi-people"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Users</h3>
|
|
|
|
|
<p class="stat-value" id="totalUsers" aria-label="Total users">
|
|
|
|
|
<span class="spinner spinner-small"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Quick Actions -->
|
|
|
|
|
<section class="actions-section" aria-label="Quick actions">
|
|
|
|
|
<h2 class="section-heading">Quick Actions</h2>
|
|
|
|
|
<div class="actions-bar">
|
|
|
|
|
<a href="products.html?action=create" class="btn btn-primary">
|
|
|
|
|
<i class="bi bi-plus-circle" aria-hidden="true"></i>
|
|
|
|
|
<span>Add Product</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="blog.html?action=create" class="btn btn-info">
|
|
|
|
|
<i class="bi bi-file-plus" aria-hidden="true"></i>
|
|
|
|
|
<span>New Blog Post</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="portfolio.html?action=create" class="btn btn-success">
|
|
|
|
|
<i class="bi bi-image" aria-hidden="true"></i>
|
|
|
|
|
<span>Add Portfolio</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS -->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Utility Functions -->
|
|
|
|
|
<script src="../assets/js/utils.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Authentication -->
|
|
|
|
|
<script src="js/auth.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Dashboard Script -->
|
|
|
|
|
<script>
|
|
|
|
|
// Initialize dashboard
|
|
|
|
|
document.addEventListener("DOMContentLoaded", async function () {
|
|
|
|
|
// Check authentication
|
|
|
|
|
const authenticated = await checkAuth();
|
|
|
|
|
|
|
|
|
|
if (!authenticated) return;
|
|
|
|
|
|
|
|
|
|
// Display user greeting
|
|
|
|
|
if (window.adminAuth.user) {
|
|
|
|
|
const greeting = document.getElementById("userGreeting");
|
|
|
|
|
greeting.textContent = `Hello, ${escapeHtml(
|
|
|
|
|
window.adminAuth.user.username
|
|
|
|
|
)}!`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Load dashboard stats
|
|
|
|
|
loadDashboardStats();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Load dashboard statistics
|
|
|
|
|
async function loadDashboardStats() {
|
|
|
|
|
try {
|
|
|
|
|
const data = await apiRequest("/api/admin/dashboard/stats");
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
// Update stats
|
|
|
|
|
document.getElementById("totalProducts").textContent =
|
|
|
|
|
data.stats.products || 0;
|
|
|
|
|
document.getElementById("totalPortfolio").textContent =
|
|
|
|
|
data.stats.portfolio || 0;
|
|
|
|
|
document.getElementById("totalBlogPosts").textContent =
|
|
|
|
|
data.stats.blogPosts || 0;
|
|
|
|
|
document.getElementById("totalUsers").textContent =
|
|
|
|
|
data.stats.users || 0;
|
|
|
|
|
|
|
|
|
|
// Announce to screen readers
|
|
|
|
|
announceToScreenReader("Dashboard statistics loaded");
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error(data.message || "Failed to load stats");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
showToast("Failed to load dashboard statistics", "error");
|
|
|
|
|
|
|
|
|
|
// Show fallback values
|
|
|
|
|
document.getElementById("totalProducts").textContent = "--";
|
|
|
|
|
document.getElementById("totalPortfolio").textContent = "--";
|
|
|
|
|
document.getElementById("totalBlogPosts").textContent = "--";
|
|
|
|
|
document.getElementById("totalUsers").textContent = "--";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
