Updatweb
This commit is contained in:
Local Server
242
website/admin/dashboard-example.html
Normal file
242
website/admin/dashboard-example.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!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>
|
||||
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user