Loading…
Loading…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
</head>
<body>
<div class="admin-dashboard d-flex flex-column flex-md-row">
<!-- Sidebar -->
<nav id="sidebarMenu" class="sidebar collapse d-md-block flex-shrink-0 p-3 bg-light">
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
<i class="fa-solid fa-layer-group fa-2x me-2" aria-hidden="true"></i>
<span class="fs-4">Admin</span>
</a>
<hr>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#" class="nav-link active" aria-current="page">
<i class="fa-solid fa-chart-line me-2" aria-hidden="true"></i>Dashboard
</a>
</li>
<li class="list-group-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-bolt me-2" aria-hidden="true"></i>Analytics
</a>
</li>
<li class="list-group-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-code me-2" aria-hidden="true"></i>Projects
</a>
</li>
<li class="list-group-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-arrow-right me-2" aria-hidden="true"></i>Logout
</a>
</li>
</ul>
</nav>
<!-- Main Content -->
<main class="flex-grow-1 p-4">
<header class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">Dashboard Overview</h1>
<button
class="btn btn-outline-primary d-md-none"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
</header>
<section class="row g-3" aria-label="Dashboard statistics">
<div class="col-12 col-sm-6 col-lg-3">
<div class="card text-bg-primary h-100">
<div class="card-body">
<h2 class="card-title h5">Revenue</h2>
<p class="card-text display-6">$12,340</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card text-bg-success h-100">
<div class="card-body">
<h2 class="card-title h5">Users</h2>
<p class="card-text display-6">1,284</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card text-bg-warning h-100">
<div class="card-body">
<h2 class="card-title h5">Orders</h2>
<p class="card-text display-6">342</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card text-bg-danger h-100">
<div class="card-body">
<h2 class="card-title h5">Issues</h2>
<p class="card-text display-6">7</p>
</div>
</div>
</div>
</section>
<section class="row g-3 mt-3" aria-label="Dashboard charts">
<div class="col-12 col-lg-8">
<div class="card h-100">
<div class="card-header">Sales Over Time</div>
<div class="card-body">
<canvas
id="salesChart"
role="img"
aria-label="Line chart showing sales over the past 12 months"
></canvas>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-header">Traffic Sources</div>
<div class="card-body">
<canvas
id="trafficChart"
role="img"
aria-label="Doughnut chart showing traffic source distribution"
></canvas>
</div>
</div>
</div>
</section>
<footer class="mt-4 text-center text-muted">
© 2026 Your Company. All rights reserved.
</footer>
</main>
</div>
</body>
</html>.admin-dashboard .sidebar {
min-width: 220px;
max-width: 220px;
height: 100vh;
position: sticky;
top: 0;
}
.admin-dashboard .sidebar .nav-link {
color: #333;
}
.admin-dashboard .sidebar .nav-link.active {
background-color: #e9ecef;
font-weight: 600;
}
@media (max-width: 767.98px) {
.admin-dashboard .sidebar {
position: static;
width: 100%;
height: auto;
}
}document.addEventListener('DOMContentLoaded', () => {
if (window.Chart) {
var salesCtx = document.getElementById('salesChart').getContext('2d');
new Chart(salesCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Sales ($k)',
data: [12, 19, 3, 5, 2, 3, 9, 14, 7, 11, 6, 15],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: { beginAtZero: true }
}
}
});
var trafficCtx = document.getElementById('trafficChart').getContext('2d');
new Chart(trafficCtx, {
type: 'doughnut',
data: {
labels: ['Organic', 'Referral', 'Social', 'Email'],
datasets: [{
data: [55, 15, 20, 10],
backgroundColor: ['#0d6efd', '#6c757d', '#198754', '#dc3545']
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' }
}
}
});
}
});