Ecommerce Admin Dashboard Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-Commerce Dashboard</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div class="dashboard-container"> <!-- Sidebar --> <aside class="sidebar"> <div class="logo"> <i class="fas fa-store"></i> <span>ShopEase</span> </div> <ul class="menu"> <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li> <li><a href="#"><i class="fas fa-shopping-bag"></i> Products</a></li> <li><a href="#"><i class="fas fa-list"></i> Orders</a></li> <li><a href="#"><i class="fas fa-users"></i> Customers</a></li> <li><a href="#"><i class="fas fa-chart-line"></i> Analytics</a></li> <li><a href="#"><i class="fas fa-tags"></i> Discounts</a></li> <li><a href="#"><i class="fas fa-comments"></i> Reviews</a></li> <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li> </ul> <div class="sidebar-footer"> <div class="user-profile"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User"> <div> <span class="name">Sarah Johnson</span> <span class="role">Admin</span> </div> </div> <button class="logout-btn"><i class="fas fa-sign-out-alt"></i></button> </div> </aside> <!-- Main Content --> <main class="main-content"> <!-- Header --> <header class="header"> <div class="search-bar"> <i class="fas fa-search"></i> <input type="text" placeholder="Search..."> </div> <div class="header-actions"> <button class="notification-btn"> <i class="fas fa-bell"></i> <span class="badge">3</span> </button> <button class="message-btn"> <i class="fas fa-envelope"></i> <span class="badge">5</span> </button> </div> </header> <!-- Dashboard Overview --> <section class="dashboard-overview"> <h1>Dashboard Overview</h1> <div class="stats-cards"> <div class="stat-card"> <div class="icon-box revenue"> <i class="fas fa-dollar-sign"></i> </div> <div class="stat-info"> <h3>Total Revenue</h3> <p class="amount">$24,780</p> <p class="change positive"><i class="fas fa-arrow-up"></i> 12.5% from last month</p> </div> </div> <div class="stat-card"> <div class="icon-box orders"> <i class="fas fa-shopping-cart"></i> </div> <div class="stat-info"> <h3>Total Orders</h3> <p class="amount">1,245</p> <p class="change positive"><i class="fas fa-arrow-up"></i> 8.3% from last month</p> </div> </div> <div class="stat-card"> <div class="icon-box customers"> <i class="fas fa-users"></i> </div> <div class="stat-info"> <h3>New Customers</h3> <p class="amount">324</p> <p class="change negative"><i class="fas fa-arrow-down"></i> 2.1% from last month</p> </div> </div> <div class="stat-card"> <div class="icon-box conversion"> <i class="fas fa-percentage"></i> </div> <div class="stat-info"> <h3>Conversion Rate</h3> <p class="amount">3.42%</p> <p class="change positive"><i class="fas fa-arrow-up"></i> 1.2% from last month</p> </div> </div> </div> </section> <!-- Charts Section --> <section class="charts-section"> <div class="chart-container"> <h2>Sales Analytics</h2> <canvas id="salesChart"></canvas> </div> <div class="chart-container"> <h2>Revenue Sources</h2> <canvas id="revenueChart"></canvas> </div> </section> <!-- Recent Orders and Top Products --> <section class="tables-section"> <div class="table-container"> <div class="table-header"> <h2>Recent Orders</h2> <a href="#" class="view-all">View All</a> </div> <table class="orders-table"> <thead> <tr> <th>Order ID</th> <th>Customer</th> <th>Date</th> <th>Amount</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>#ORD-7841</td> <td>John Smith</td> <td>12 Jul, 2023</td> <td>$128.50</td> <td><span class="status delivered">Delivered</span></td> <td><button class="action-btn"><i class="fas fa-ellipsis-v"></i></button></td> </tr> <tr> <td>#ORD-7839</td> <td>Emma Johnson</td> <td>11 Jul, 2023</td> <td>$245.00</td> <td><span class="status shipped">Shipped</span></td> <td><button class="action-btn"><i class="fas fa-ellipsis-v"></i></button></td> </tr> <tr> <td>#ORD-7835</td> <td>Michael Brown</td> <td>10 Jul, 2023</td> <td>$87.99</td> <td><span class="status processing">Processing</span></td> <td><button class="action-btn"><i class="fas fa-ellipsis-v"></i></button></td> </tr> <tr> <td>#ORD-7829</td> <td>Sarah Wilson</td> <td>09 Jul, 2023</td> <td>$156.75</td> <td><span class="status cancelled">Cancelled</span></td> <td><button class="action-btn"><i class="fas fa-ellipsis-v"></i></button></td> </tr> <tr> <td>#ORD-7824</td> <td>David Lee</td> <td>08 Jul, 2023</td> <td>$320.50</td> <td><span class="status delivered">Delivered</span></td> <td><button class="action-btn"><i class="fas fa-ellipsis-v"></i></button></td> </tr> </tbody> </table> </div> <div class="table-container"> <div class="table-header"> <h2>Top Products</h2> <a href="#" class="view-all">View All</a> </div> <table class="products-table"> <thead> <tr> <th>Product</th> <th>Category</th> <th>Price</th> <th>Sold</th> <th>Revenue</th> </tr> </thead> <tbody> <tr> <td> <div class="product-info"> <img src="https://via.placeholder.com/40" alt="Wireless Headphones"> <span>Wireless Headphones</span> </div> </td> <td>Electronics</td> <td>$99.99</td> <td>245</td> <td>$24,497.55</td> </tr> <tr> <td> <div class="product-info"> <img src="https://via.placeholder.com/40" alt="Smart Watch"> <span>Smart Watch</span> </div> </td> <td>Electronics</td> <td>$199.99</td> <td>187</td> <td>$37,398.13</td> </tr> <tr> <td> <div class="product-info"> <img src="https://via.placeholder.com/40" alt="Running Shoes"> <span>Running Shoes</span> </div> </td> <td>Fashion</td> <td>$79.99</td> <td>156</td> <td>$12,478.44</td> </tr> <tr> <td> <div class="product-info"> <img src="https://via.placeholder.com/40" alt="Coffee Maker"> <span>Coffee Maker</span> </div> </td> <td>Home</td> <td>$129.99</td> <td>98</td> <td>$12,739.02</td> </tr> <tr> <td> <div class="product-info"> <img src="https://via.placeholder.com/40" alt="Backpack"> <span>Backpack</span> </div> </td> <td>Fashion</td> <td>$49.99</td> <td>210</td> <td>$10,497.90</td> </tr> </tbody> </table> </div> </section> <!-- Customer Reviews and Activity Log --> <section class="additional-info"> <div class="info-container"> <h2>Recent Reviews</h2> <div class="reviews-list"> <div class="review-item"> <div class="review-header"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"> <div> <h4>Robert Davis</h4> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> <span class="review-date">2 days ago</span> </div> <p class="review-text">"The product exceeded my expectations. Very good quality and fast delivery!"</p> <span class="product-reviewed">Wireless Headphones</span> </div> <div class="review-item"> <div class="review-header"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User"> <div> <h4>Jennifer Lopez</h4> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> <span class="review-date">5 days ago</span> </div> <p class="review-text">"Good product but the battery life could be better."</p> <span class="product-reviewed">Smart Watch</span> </div> </div> </div> <div class="info-container"> <h2>Activity Log</h2> <div class="activity-log"> <div class="log-item"> <div class="log-icon success"> <i class="fas fa-check-circle"></i> </div> <div class="log-content"> <p>Order #ORD-7841 has been delivered successfully</p> <span class="log-time">10 minutes ago</span> </div> </div> <div class="log-item"> <div class="log-icon warning"> <i class="fas fa-exclamation-circle"></i> </div> <div class="log-content"> <p>Low stock alert for "Wireless Headphones" (only 5 left)</p> <span class="log-time">2 hours ago</span> </div> </div> <div class="log-item"> <div class="log-icon info"> <i class="fas fa-info-circle"></i> </div> <div class="log-content"> <p>New customer registration: Michael Brown</p> <span class="log-time">5 hours ago</span> </div> </div> <div class="log-item"> <div class="log-icon primary"> <i class="fas fa-shopping-cart"></i> </div> <div class="log-content"> <p>New order received #ORD-7842 ($87.99)</p> <span class="log-time">Yesterday</span> </div> </div> </div> </div> </section> </main> </div> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #4361ee; --secondary-color: #3f37c9; --accent-color: #4895ef; --success-color: #4cc9f0; --danger-color: #f72585; --warning-color: #f8961e; --info-color: #43aa8b; --light-color: #f8f9fa; --dark-color: #212529; --gray-color: #6c757d; --light-gray: #e9ecef; --sidebar-width: 250px; --header-height: 70px; --card-radius: 10px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; color: var(--dark-color); } a { text-decoration: none; color: inherit; } /* Dashboard Layout */ .dashboard-container { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; transition: var(--transition); z-index: 100; } .main-content { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; } /* Sidebar Styles */ .logo { display: flex; align-items: center; padding: 20px; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--light-gray); } .logo i { margin-right: 10px; font-size: 1.8rem; } .menu { list-style: none; padding: 20px 0; flex: 1; } .menu li { margin: 5px 0; } .menu li a { display: flex; align-items: center; padding: 12px 20px; transition: var(--transition); color: var(--gray-color); } .menu li a:hover { background-color: rgba(67, 97, 238, 0.1); color: var(--primary-color); } .menu li a i { margin-right: 10px; font-size: 1.1rem; } .menu li.active a { background-color: rgba(67, 97, 238, 0.1); color: var(--primary-color); border-left: 3px solid var(--primary-color); } .sidebar-footer { padding: 20px; border-top: 1px solid var(--light-gray); display: flex; align-items: center; justify-content: space-between; } .user-profile { display: flex; align-items: center; } .user-profile img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .user-profile .name { font-weight: 600; display: block; font-size: 0.9rem; } .user-profile .role { font-size: 0.8rem; color: var(--gray-color); } .logout-btn { background: none; border: none; font-size: 1.2rem; color: var(--gray-color); cursor: pointer; transition: var(--transition); } .logout-btn:hover { color: var(--danger-color); } /* Header Styles */ .header { height: var(--header-height); background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 90; } .search-bar { display: flex; align-items: center; background-color: var(--light-gray); padding: 8px 15px; border-radius: 20px; width: 300px; } .search-bar i { color: var(--gray-color); margin-right: 10px; } .search-bar input { border: none; background: none; outline: none; width: 100%; } .header-actions { display: flex; align-items: center; gap: 15px; } .notification-btn, .message-btn { background: none; border: none; font-size: 1.2rem; color: var(--gray-color); cursor: pointer; position: relative; } .badge { position: absolute; top: -5px; right: -5px; background-color: var(--danger-color); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; } /* Dashboard Overview */ .dashboard-overview { padding: 20px; } .dashboard-overview h1 { margin-bottom: 20px; font-size: 1.8rem; } .stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background-color: white; border-radius: var(--card-radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 20px; display: flex; transition: var(--transition); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .icon-box { width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.5rem; color: white; } .icon-box.revenue { background-color: var(--primary-color); } .icon-box.orders { background-color: var(--accent-color); } .icon-box.customers { background-color: var(--info-color); } .icon-box.conversion { background-color: var(--warning-color); } .stat-info h3 { font-size: 1rem; color: var(--gray-color); margin-bottom: 5px; font-weight: 500; } .stat-info .amount { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; } .stat-info .change { font-size: 0.8rem; display: flex; align-items: center; } .change.positive { color: var(--info-color); } .change.negative { color: var(--danger-color); } .change i { margin-right: 5px; } /* Charts Section */ .charts-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; padding: 0 20px; margin-bottom: 30px; } .chart-container { background-color: white; border-radius: var(--card-radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 20px; } .chart-container h2 { margin-bottom: 20px; font-size: 1.2rem; } /* Tables Section */ .tables-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; padding: 0 20px; margin-bottom: 30px; } .table-container { background-color: white; border-radius: var(--card-radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 20px; } .table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .table-header h2 { font-size: 1.2rem; } .view-all { font-size: 0.9rem; color: var(--primary-color); font-weight: 500; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--light-gray); } th { font-weight: 600; color: var(--gray-color); font-size: 0.9rem; } .status { padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; } .status.delivered { background-color: rgba(76, 201, 240, 0.1); color: var(--success-color); } .status.shipped { background-color: rgba(248, 150, 30, 0.1); color: var(--warning-color); } .status.processing { background-color: rgba(67, 97, 238, 0.1); color: var(--primary-color); } .status.cancelled { background-color: rgba(247, 37, 133, 0.1); color: var(--danger-color); } .action-btn { background: none; border: none; color: var(--gray-color); cursor: pointer; font-size: 1rem; } .product-info { display: flex; align-items: center; } .product-info img { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; margin-right: 10px; } /* Additional Info Section */ .additional-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; padding: 0 20px 30px; } .info-container { background-color: white; border-radius: var(--card-radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); padding: 20px; } .info-container h2 { margin-bottom: 20px; font-size: 1.2rem; } .reviews-list { display: flex; flex-direction: column; gap: 20px; } .review-item { border-bottom: 1px solid var(--light-gray); padding-bottom: 15px; } .review-item:last-child { border-bottom: none; padding-bottom: 0; } .review-header { display: flex; align-items: center; margin-bottom: 10px; position: relative; } .review-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px; } .review-header h4 { font-size: 0.9rem; } .rating { color: var(--warning-color); font-size: 0.8rem; } .review-date { position: absolute; right: 0; top: 0; font-size: 0.8rem; color: var(--gray-color); } .review-text { font-size: 0.9rem; margin-bottom: 5px; line-height: 1.5; } .product-reviewed { font-size: 0.8rem; color: var(--gray-color); font-style: italic; } .activity-log { display: flex; flex-direction: column; gap: 15px; } .log-item { display: flex; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--light-gray); } .log-item:last-child { border-bottom: none; padding-bottom: 0; } .log-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; } .log-icon.success { background-color: var(--success-color); } .log-icon.warning { background-color: var(--warning-color); } .log-icon.info { background-color: var(--info-color); } .log-icon.primary { background-color: var(--primary-color); } .log-content p { font-size: 0.9rem; margin-bottom: 5px; } .log-time { font-size: 0.8rem; color: var(--gray-color); } /* Responsive Styles */ @media (max-width: 992px) { .sidebar { position: fixed; left: -100%; top: 0; bottom: 0; transition: var(--transition); } .sidebar.active { left: 0; } .main-content { margin-left: 0; } } @media (max-width: 768px) { .charts-section, .tables-section, .additional-info { grid-template-columns: 1fr; } .search-bar { width: 200px; } } @media (max-width: 576px) { .header { padding: 0 10px; } .search-bar { display: none; } .stats-cards { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Initialize charts initSalesChart(); initRevenueChart(); // Toggle sidebar on mobile const sidebarToggle = document.createElement('button'); sidebarToggle.innerHTML = '<i class="fas fa-bars"></i>'; sidebarToggle.classList.add('sidebar-toggle'); document.querySelector('.header').prepend(sidebarToggle); sidebarToggle.addEventListener('click', function() { document.querySelector('.sidebar').classList.toggle('active'); }); // Notification dropdown const notificationBtn = document.querySelector('.notification-btn'); const messageBtn = document.querySelector('.message-btn'); // Add dropdown functionality (example) notificationBtn.addEventListener('click', function() { // In a real app, this would toggle a dropdown menu alert('You have 3 new notifications'); }); messageBtn.addEventListener('click', function() { // In a real app, this would toggle a dropdown menu alert('You have 5 new messages'); }); // Logout button const logoutBtn = document.querySelector('.logout-btn'); logoutBtn.addEventListener('click', function() { // In a real app, this would handle logout if(confirm('Are you sure you want to logout?')) { alert('Logged out successfully'); // Redirect to login page // window.location.href = 'login.html'; } }); // Status badges in tables could be made interactive document.querySelectorAll('.status').forEach(status => { status.addEventListener('click', function() { // In a real app, this might open a modal to update order status alert('Change order status for ' + this.parentNode.parentNode.querySelector('td:nth-child(2)').textContent); }); }); // Action buttons in tables document.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); // In a real app, this would show a dropdown with actions alert('Show actions for this order'); }); }); }); // Sales Chart function initSalesChart() { const ctx = document.getElementById('salesChart').getContext('2d'); const salesChart = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [{ label: 'Sales', data: [12000, 19000, 15000, 18000, 21000, 22000, 24000], backgroundColor: 'rgba(67, 97, 238, 0.1)', borderColor: 'rgba(67, 97, 238, 1)', borderWidth: 2, tension: 0.4, fill: true }] }, options: { responsive: true, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false, } }, scales: { y: { beginAtZero: false, ticks: { callback: function(value) { return '$' + value.toLocaleString(); } } } } } }); } // Revenue Chart function initRevenueChart() { const ctx = document.getElementById('revenueChart').getContext('2d'); const revenueChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Electronics', 'Fashion', 'Home', 'Beauty', 'Sports'], datasets: [{ data: [45, 25, 15, 10, 5], backgroundColor: [ 'rgba(67, 97, 238, 0.8)', 'rgba(72, 149, 239, 0.8)', 'rgba(76, 201, 240, 0.8)', 'rgba(67, 170, 139, 0.8)', 'rgba(248, 150, 30, 0.8)' ], borderColor: [ 'rgba(67, 97, 238, 1)', 'rgba(72, 149, 239, 1)', 'rgba(76, 201, 240, 1)', 'rgba(67, 170, 139, 1)', 'rgba(248, 150, 30, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'right', }, tooltip: { callbacks: { label: function(context) { let label = context.label || ''; if (label) { label += ': '; } label += context.raw + '%'; return label; } } } }, cutout: '70%' } }); }
Output Preview
Desktop
Mobile
Fullscreen