custom1/admin_dashboard.html

408 lines
22 KiB
HTML
Raw Normal View History

<!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="style.css" />
</head>
<body>
<div class="page-wrapper">
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Overview</title>
<link rel="stylesheet" href="style.css" />
<section class="dashboard-container" aria-labelledby="dashboardOverviewTitle">
<header class="dashboard-header">
<h1 id="dashboardOverviewTitle">Dashboard Overview</h1>
<p>Welcome back, [User Name]! Here's a quick look at your activity.</p>
</header>
<div class="overview-cards">
<div class="card">
<h3>Total Orders</h3>
<p class="metric">12</p>
<p class="description">Orders placed to date.</p>
</div>
<div class="card">
<h3>Pending Orders</h3>
<p class="metric">03</p>
<p class="description">Orders awaiting processing.</p>
</div>
<div class="card">
<h3>Last Order Date</h3>
<p class="metric">Jan 15, 2024</p>
<p class="description">Date of your most recent purchase.</p>
</div>
<div class="card">
<h3>Shopping Cart</h3>
<p class="metric">02 Items</p>
<p class="description">Items currently in your cart.</p>
</div>
</div>
<div class="dashboard-content-grid">
<div class="dashboard-section" aria-labelledby="recentOrdersTitle">
<h2 id="recentOrdersTitle">Recent Orders</h2>
<table class="order-history-table">
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Date</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD78901</td>
<td>Jan 15, 2024</td>
<td>₹15,000</td>
<td><span class="order-status status-delivered">Delivered</span></td>
<td><a href="#order-detail-78901">View Details</a></td>
</tr>
<tr>
<td>#ORD78899</td>
<td>Jan 10, 2024</td>
<td>₹2,500</td>
<td><span class="order-status status-processing">Processing</span></td>
<td><a href="#order-detail-78899">View Details</a></td>
</tr>
<tr>
<td>#ORD78850</td>
<td>Dec 28, 2023</td>
<td>₹8,999</td>
<td><span class="order-status status-shipped">Shipped</span></td>
<td><a href="#order-detail-78850">View Details</a></td>
</tr>
<tr>
<td>#ORD78800</td>
<td>Dec 15, 2023</td>
<td>₹20,000</td>
<td><span class="order-status status-delivered">Delivered</span></td>
<td><a href="#order-detail-78800">View Details</a></td>
</tr>
<tr>
<td>#ORD78750</td>
<td>Dec 01, 2023</td>
<td>₹5,500</td>
<td><span class="order-status status-cancelled">Cancelled</span></td>
<td><a href="#order-detail-78750">View Details</a></td>
</tr>
</tbody>
</table>
<div class="view-all-link">
<a href="#order-history">View All Order History →</a>
</div>
</div>
<div class="dashboard-section" aria-labelledby="quickActionsTitle">
<h2 id="quickActionsTitle">Quick Actions</h2>
<nav aria-label="Quick Dashboard Navigation">
<ul>
<li class="mb-20"><a href="#profile-settings" style="text-decoration: none; color: #a0522d; font-weight: 500;">▸ Update Profile Settings</a></li>
<li class="mb-20"><a href="#track-order" style="text-decoration: none; color: #a0522d; font-weight: 500;">▸ Track My Latest Order</a></li>
<li class="mb-20"><a href="#browse-catalog" style="text-decoration: none; color: #a0522d; font-weight: 500;">▸ Browse Jewelry Catalog</a></li>
<li class="mb-20"><a href="#support" style="text-decoration: none; color: #a0522d; font-weight: 500;">▸ Contact Support</a></li>
<li><a href="#logout" style="text-decoration: none; color: #a0522d; font-weight: 500;">▸ Log Out</a></li>
</ul>
</nav>
</div>
</div>
</section>
<section class="quick-actions-panel">
<h2 class="quick-actions-title">Quick Actions</h2>
<div class="quick-actions-grid">
<a href="#shop-now" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
🛍️
</div>
<span class="quick-action-label">Shop Latest Collection</span>
</a>
<a href="#view-cart" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
🛒
</div>
<span class="quick-action-label">View Shopping Cart</span>
</a>
<a href="#my-orders" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
📦
</div>
<span class="quick-action-label">My Orders &amp; History</span>
</a>
<a href="#update-profile" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
⚙️
</div>
<span class="quick-action-label">Update Profile</span>
</a>
<a href="#wishlist" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
💖
</div>
<span class="quick-action-label">My Wishlist</span>
</a>
<a href="#contact-support" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
📞
</div>
<span class="quick-action-label">Contact Support</span>
</a>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Activities Log</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<section class="recent-activities-log">
<h2>Recent Activities Log</h2>
<div class="activity-table-wrapper">
<table class="activity-table">
<thead>
<tr>
<th scope="col">Activity Type</th>
<th scope="col">Details</th>
<th scope="col">Date &amp; Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="activity-type">Order Placed</td>
<td>Order #ORDR-2023001 for <span class="activity-item-name">Diamond Stud Earrings</span> (x1)</td>
<td class="activity-date">2023-10-26 14:30:00</td>
</tr>
<tr>
<td class="activity-type">Login</td>
<td>User successfully logged in.</td>
<td class="activity-date">2023-10-26 14:25:15</td>
</tr>
<tr>
<td class="activity-type">Product Viewed</td>
<td>Viewed <span class="activity-item-name">Emerald Cut Ring</span></td>
<td class="activity-date">2023-10-26 14:10:45</td>
</tr>
<tr>
<td class="activity-type">Item Added to Cart</td>
<td>Added <span class="activity-item-name">Pearl Necklace</span> to cart.</td>
<td class="activity-date">2023-10-25 10:05:20</td>
</tr>
<tr>
<td class="activity-type">Password Change</td>
<td>User updated password.</td>
<td class="activity-date">2023-10-24 09:15:00</td>
</tr>
<tr>
<td class="activity-type">Order Placed</td>
<td>Order #ORDR-2023002 for <span class="activity-item-name">Gold Bangle Set</span> (x1)</td>
<td class="activity-date">2023-10-23 18:00:00</td>
</tr>
<tr>
<td class="activity-type">Product Viewed</td>
<td>Viewed <span class="activity-item-name">Diamond Solitaire Necklace</span></td>
<td class="activity-date">2023-10-23 17:45:00</td>
</tr>
<tr>
<td class="activity-type">Logout</td>
<td>User logged out.</td>
<td class="activity-date">2023-10-22 12:30:00</td>
</tr>
<tr>
<td class="activity-type">Login</td>
<td>User successfully logged in.</td>
<td class="activity-date">2023-10-22 12:00:00</td>
</tr>
<tr>
<td class="activity-type">Account Update</td>
<td>Updated shipping address.</td>
<td class="activity-date">2023-10-21 16:00:00</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional: Placeholder for when there are no activities -->
<!--
<div class="no-activities">
<p>No recent activities to display yet. Start exploring our exquisite jewelry collection!</p>
</div>
-->
<nav class="pagination" aria-label="Activities Pagination">
<button aria-label="Previous page" disabled="">← Previous</button>
<span>Page 1 of 5</span>
<button aria-label="Next page">Next →</button>
</nav>
</section>
<section class="system-health-monitor">
<div class="container">
<header class="section-header">
<h2>System Health Monitor</h2>
<p>Real-time overview of critical system components and performance metrics.</p>
</header>
<div class="health-status-summary">
<h3 class="status-indicator status-operational">
<span class="icon" aria-hidden="true"></span> Overall System Status: Operational
</h3>
<p>All core services are running smoothly and within expected parameters.</p>
</div>
<div class="health-metrics-grid">
<div class="metric-card">
<h4 class="metric-title">Server Uptime</h4>
<p class="metric-value">
<span class="value">99 days, 14 hours, 32 minutes</span>
</p>
<p class="metric-detail">Last reboot: <time datetime="2024-01-01T00:00:00Z">January 1, 2024</time></p>
</div>
<div class="metric-card">
<h4 class="metric-title">Database Connection</h4>
<p class="metric-value status-connected">
<span class="icon" aria-hidden="true"></span> Connected
</p>
<p class="metric-detail">Status: All primary databases online</p>
</div>
<div class="metric-card">
<h4 class="metric-title">API Response Time</h4>
<p class="metric-value">
<span class="value">55 ms</span>
</p>
<p class="metric-detail">Average external API latency (last 1 hour)</p>
</div>
<div class="metric-card">
<h4 class="metric-title">Disk Usage</h4>
<p class="metric-value status-ok">
<span class="value">45%</span>
</p>
<p class="metric-detail">1.2 TB Free of 2 TB total capacity</p>
</div>
<div class="metric-card">
<h4 class="metric-title">CPU Load</h4>
<p class="metric-value status-ok">
<span class="value">12%</span>
</p>
<p class="metric-detail">Current average utilization across all cores</p>
</div>
<div class="metric-card">
<h4 class="metric-title">Memory Usage</h4>
<p class="metric-value status-warning">
<span class="value">78%</span>
</p>
<p class="metric-detail">Potential for high usage spikes during peak hours</p>
</div>
</div>
<div class="health-logs-charts">
<div class="log-summary-card">
<h3 class="card-title">Error Log Summary</h3>
<p class="log-status status-ok">
<span class="icon" aria-hidden="true"></span> No critical errors detected in the last 24 hours.
</p>
<ul class="recent-errors-list">
<li><time datetime="2024-07-20T10:30:00Z">10:30 AM</time> - <span class="log-level">[INFO]</span> Login attempt from new IP detected.</li>
<li><time datetime="2024-07-20T09:15:00Z">09:15 AM</time> - <span class="log-level">[WARN]</span> Database query exceeded 500ms execution time.</li>
<li><time datetime="2024-07-20T08:00:00Z">08:00 AM</time> - <span class="log-level">[INFO]</span> Daily scheduled database backup completed successfully.</li>
</ul>
<a href="#" class="view-all-logs-link">View Full Logs →</a>
</div>
<div class="chart-card">
<h3 class="card-title">Server Load Over Time</h3>
<div class="chart-placeholder" aria-label="Placeholder for interactive line chart showing CPU and memory usage trends.">
<p><em>(Placeholder for chart)</em></p>
<p>Interactive line chart displaying CPU and memory usage over the past 24 hours.</p>
</div>
</div>
<div class="chart-card">
<h3 class="card-title">Database Activity</h3>
<div class="chart-placeholder" aria-label="Placeholder for bar chart showing active connections and query rates.">
<p><em>(Placeholder for chart)</em></p>
<p>Bar chart illustrating active database connections and average query rates.</p>
</div>
</div>
</div>
<footer class="health-monitor-footer">
<p>Last Updated: <time datetime="2024-07-20T11:45:00Z">July 20, 2024, 11:45 AM (UTC)</time></p>
<button type="button" class="btn btn-primary">Refresh Data</button>
</footer>
</div>
</section>
<section class="user-management-widget">
<div class="widget-container">
<h2 class="widget-title">My Account</h2>
<p class="welcome-message">Welcome, <span class="user-name-placeholder">[User Name]</span>!</p>
<nav class="user-navigation">
<ul class="user-menu-list">
<li class="user-menu-item">
<a href="#user-dashboard" class="user-menu-link">
<span class="icon-placeholder">👤</span>
<span class="link-text">Dashboard</span>
</a>
</li>
<li class="user-menu-item">
<a href="#order-history" class="user-menu-link">
<span class="icon-placeholder">📦</span>
<span class="link-text">Order History</span>
</a>
</li>
<li class="user-menu-item">
<a href="#shopping-cart" class="user-menu-link">
<span class="icon-placeholder">🛒</span>
<span class="link-text">Shopping Cart</span>
<span class="notification-badge">[X]</span>
</a>
</li>
<li class="user-menu-item">
<a href="#profile-settings" class="user-menu-link">
<span class="icon-placeholder">⚙️</span>
<span class="link-text">Profile Settings</span>
</a>
</li>
<li class="user-menu-item">
<a href="#logout" class="user-menu-link logout-link">
<span class="icon-placeholder">🚪</span>
<span class="link-text">Logout</span>
</a>
</li>
</ul>
</nav>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping &amp; Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Overview</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Activities Log</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html>