<!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>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="dashboard-container">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo">
<i class="fas fa-chart-line"></i>
<span>Admin Panel</span>
</div>
<button class="sidebar-toggle" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
</div>
<nav class="sidebar-nav">
<ul>
<li class="active">
<a href="#dashboard" data-page="dashboard">
<i class="fas fa-home"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#users" data-page="users">
<i class="fas fa-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="#products" data-page="products">
<i class="fas fa-box"></i>
<span>Products</span>
</a>
</li>
<li>
<a href="#orders" data-page="orders">
<i class="fas fa-shopping-cart"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="#analytics" data-page="analytics">
<i class="fas fa-chart-bar"></i>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#settings" data-page="settings">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<div class="user-profile">
<img src="https://i.pravatar.cc/150?img=12" alt="User Avatar">
<div class="user-info">
<span class="user-name">Admin User</span>
<span class="user-role">Administrator</span>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Top Navbar -->
<header class="navbar">
<div class="navbar-left">
<button class="mobile-toggle" id="mobileToggle">
<i class="fas fa-bars"></i>
</button>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search...">
</div>
</div>
<div class="navbar-right">
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
<div class="notifications" id="notificationBtn">
<i class="fas fa-bell"></i>
<span class="badge">3</span>
</div>
<div class="user-menu">
<img src="https://i.pravatar.cc/150?img=12" alt="User">
<div class="dropdown-menu" id="userDropdown">
<a href="#settings" data-page="settings"><i class="fas fa-cog"></i> Settings</a>
<a href="#" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="content" id="pageContent">
<!-- Dashboard Page -->
<div class="page active" id="dashboard-page">
<div class="page-header">
<h1>Dashboard Overview</h1>
<p>Welcome back! Here's what's happening today.</p>
</div>
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon blue">
<i class="fas fa-users"></i>
</div>
<div class="stat-content">
<h3>Total Users</h3>
<p class="stat-value" id="totalUsers">0</p>
<span class="stat-change positive">
<i class="fas fa-arrow-up"></i> 12.5%
</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon green">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="stat-content">
<h3>Revenue</h3>
<p class="stat-value" id="totalRevenue">$0</p>
<span class="stat-change positive">
<i class="fas fa-arrow-up"></i> 8.2%
</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon orange">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="stat-content">
<h3>Orders</h3>
<p class="stat-value" id="totalOrders">0</p>
<span class="stat-change negative">
<i class="fas fa-arrow-down"></i> 3.1%
</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon purple">
<i class="fas fa-box"></i>
</div>
<div class="stat-content">
<h3>Products</h3>
<p class="stat-value" id="totalProducts">0</p>
<span class="stat-change positive">
<i class="fas fa-arrow-up"></i> 5.7%
</span>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="charts-grid">
<div class="chart-card">
<div class="chart-header">
<h3>Revenue Overview</h3>
<select id="revenueFilter">
<option value="week">This Week</option>
<option value="month" selected>This Month</option>
<option value="year">This Year</option>
</select>
</div>
<canvas id="revenueChart"></canvas>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>User Growth</h3>
<select id="userFilter">
<option value="week">This Week</option>
<option value="month" selected>This Month</option>
<option value="year">This Year</option>
</select>
</div>
<canvas id="userChart"></canvas>
</div>
</div>
<!-- Recent Activity -->
<div class="activity-section">
<div class="section-header">
<h3>Recent Activity</h3>
<a href="#" class="view-all">View All</a>
</div>
<div class="activity-list" id="activityList">
<!-- Activity items will be loaded here -->
</div>
</div>
</div>
<!-- Users Page -->
<div class="page" id="users-page">
<div class="page-header">
<h1>User Management</h1>
<button class="btn btn-primary" id="addUserBtn">
<i class="fas fa-plus"></i> Add User
</button>
</div>
<div class="table-controls">
<div class="search-filter">
<input type="text" id="userSearch" placeholder="Search users...">
<select id="roleFilter">
<option value="">All Roles</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="moderator">Moderator</option>
</select>
</div>
<div class="table-actions">
<button class="btn btn-secondary" id="exportUsers">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
<div class="table-container">
<table class="data-table" id="usersTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>User</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th>Joined</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="usersTableBody">
<!-- Users will be loaded here -->
</tbody>
</table>
</div>
<div class="pagination" id="usersPagination">
<!-- Pagination will be loaded here -->
</div>
</div>
<!-- Products Page -->
<div class="page" id="products-page">
<div class="page-header">
<h1>Products</h1>
<button class="btn btn-primary" id="addProductBtn">
<i class="fas fa-plus"></i> Add Product
</button>
</div>
<div class="products-grid" id="productsGrid">
<!-- Products will be loaded here -->
</div>
</div>
<!-- Orders Page -->
<div class="page" id="orders-page">
<div class="page-header">
<h1>Orders</h1>
</div>
<div class="table-container">
<table class="data-table" id="ordersTable">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Products</th>
<th>Total</th>
<th>Status</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="ordersTableBody">
<!-- Orders will be loaded here -->
</tbody>
</table>
</div>
</div>
<!-- Analytics Page -->
<div class="page" id="analytics-page">
<div class="page-header">
<h1>Analytics</h1>
</div>
<div class="analytics-grid">
<div class="chart-card full-width">
<div class="chart-header">
<h3>Sales Analytics</h3>
</div>
<canvas id="salesChart"></canvas>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>Category Distribution</h3>
</div>
<canvas id="categoryChart"></canvas>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>Traffic Sources</h3>
</div>
<canvas id="trafficChart"></canvas>
</div>
</div>
</div>
<!-- Settings Page -->
<div class="page" id="settings-page">
<div class="page-header">
<h1>Settings</h1>
</div>
<div class="settings-container">
<div class="settings-section">
<h3>Profile Settings</h3>
<form id="profileForm">
<div class="form-group">
<label>Full Name</label>
<input type="text" value="Admin User">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" value="admin@example.com">
</div>
<div class="form-group">
<label>Phone</label>
<input type="tel" value="+1234567890">
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
</div>
<div class="settings-section">
<h3>Appearance</h3>
<div class="setting-item">
<label>Theme</label>
<div class="form-group">
<select id="themeSelect">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="auto">Auto</option>
</select>
</div>
</div>
</div>
<div class="settings-section">
<h3>Notifications</h3>
<div class="setting-item">
<label>Email Notifications</label>
<input type="checkbox" class="toggle" checked>
</div>
<div class="setting-item">
<label>Push Notifications</label>
<input type="checkbox" class="toggle" checked>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Modals -->
<div class="modal" id="userModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="userModalTitle">Add User</h2>
<button class="modal-close" data-modal="userModal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="userForm">
<div class="form-group">
<label>Full Name *</label>
<input type="text" name="name" required>
</div>
<div class="form-group">
<label>Email *</label>
<input type="email" name="email" required>
</div>
<div class="form-group">
<label>Role *</label>
<select name="role" required>
<option value="user">User</option>
<option value="moderator">Moderator</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="form-group">
<label>Password *</label>
<input type="password" name="password" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal="userModal">Cancel</button>
<button type="submit" class="btn btn-primary">Save User</button>
</div>
</form>
</div>
</div>
<div class="modal" id="productModal">
<div class="modal-content">
<div class="modal-header">
<h2>Add Product</h2>
<button class="modal-close" data-modal="productModal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="productForm">
<div class="form-group">
<label>Product Name *</label>
<input type="text" name="name" required>
</div>
<div class="form-group">
<label>Category *</label>
<select name="category" required>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="food">Food</option>
<option value="books">Books</option>
</select>
</div>
<div class="form-group">
<label>Price *</label>
<input type="number" name="price" step="0.01" required>
</div>
<div class="form-group">
<label>Stock *</label>
<input type="number" name="stock" required>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" rows="4"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal="productModal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Product</button>
</div>
</form>
</div>
</div>
<div class="modal" id="orderModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="orderModalTitle">Edit Order</h2>
<button class="modal-close" data-modal="orderModal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="orderForm">
<div class="form-group">
<label>Order ID</label>
<input type="text" name="orderId" readonly>
</div>
<div class="form-group">
<label>Customer Name *</label>
<input type="text" name="customer" required>
</div>
<div class="form-group">
<label>Number of Products *</label>
<input type="number" name="products" required>
</div>
<div class="form-group">
<label>Total Amount *</label>
<input type="number" name="total" step="0.01" required>
</div>
<div class="form-group">
<label>Status *</label>
<select name="status" required>
<option value="pending">Pending</option>
<option value="processing">Processing</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal="orderModal">Cancel</button>
<button type="submit" class="btn btn-primary">Update Order</button>
</div>
</form>
</div>
</div>
<div class="modal" id="orderDetailsModal">
<div class="modal-content modal-large">
<div class="modal-header">
<h2>Order Details</h2>
<button class="modal-close" data-modal="orderDetailsModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="order-details-content">
<div class="order-details-header">
<div class="order-info-card">
<div class="info-label">Order ID</div>
<div class="info-value" id="detailOrderId">-</div>
</div>
<div class="order-info-card">
<div class="info-label">Status</div>
<div class="info-value">
<span class="status-badge" id="detailStatus">-</span>
</div>
</div>
<div class="order-info-card">
<div class="info-label">Order Date</div>
<div class="info-value" id="detailDate">-</div>
</div>
<div class="order-info-card">
<div class="info-label">Total Amount</div>
<div class="info-value" id="detailTotal">-</div>
</div>
</div>
<div class="order-details-section">
<h3><i class="fas fa-user"></i> Customer Information</h3>
<div class="details-grid">
<div class="detail-item">
<span class="detail-label">Name:</span>
<span class="detail-value" id="detailCustomerName">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Email:</span>
<span class="detail-value" id="detailCustomerEmail">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Phone:</span>
<span class="detail-value" id="detailCustomerPhone">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Address:</span>
<span class="detail-value" id="detailCustomerAddress">-</span>
</div>
</div>
</div>
<div class="order-details-section">
<h3><i class="fas fa-box"></i> Order Items</h3>
<div class="order-items-table">
<table class="data-table">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody id="detailOrderItems">
<!-- Order items will be loaded here -->
</tbody>
</table>
</div>
</div>
<div class="order-details-section">
<h3><i class="fas fa-credit-card"></i> Payment Information</h3>
<div class="details-grid">
<div class="detail-item">
<span class="detail-label">Payment Method:</span>
<span class="detail-value" id="detailPaymentMethod">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Payment Status:</span>
<span class="detail-value" id="detailPaymentStatus">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Transaction ID:</span>
<span class="detail-value" id="detailTransactionId">-</span>
</div>
</div>
</div>
<div class="order-details-section">
<h3><i class="fas fa-truck"></i> Shipping Information</h3>
<div class="details-grid">
<div class="detail-item">
<span class="detail-label">Shipping Method:</span>
<span class="detail-value" id="detailShippingMethod">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Tracking Number:</span>
<span class="detail-value" id="detailTrackingNumber">-</span>
</div>
<div class="detail-item">
<span class="detail-label">Estimated Delivery:</span>
<span class="detail-value" id="detailEstimatedDelivery">-</span>
</div>
</div>
</div>
<div class="order-summary">
<div class="summary-row">
<span>Subtotal:</span>
<span id="detailSubtotal">-</span>
</div>
<div class="summary-row">
<span>Shipping:</span>
<span id="detailShipping">-</span>
</div>
<div class="summary-row">
<span>Tax:</span>
<span id="detailTax">-</span>
</div>
<div class="summary-row total">
<span>Total:</span>
<span id="detailGrandTotal">-</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal="orderDetailsModal">Close</button>
<button type="button" class="btn btn-primary" onclick="printOrder()">
<i class="fas fa-print"></i> Print
</button>
</div>
</div>
</div>
<!-- Toast Notifications -->
<div class="toast-container" id="toastContainer"></div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/api.js"></script>
<script src="js/auth.js"></script>
<script src="js/charts.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/users.js"></script>
<script src="js/app.js"></script>
</body>
</html>