custom1/admin_user_management.html

481 lines
27 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 User Management</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>User List Table</title>
<link rel="stylesheet" href="style.css" />
<section class="user-list-section" aria-labelledby="userListHeading">
<h2 id="userListHeading">User Accounts</h2>
<div class="table-responsive">
<table class="user-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">User ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U1" alt="User 1 Avatar">
</td>
<td>#U001</td>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for John Doe">View</button>
<button class="btn btn-edit" aria-label="Edit details for John Doe">Edit</button>
<button class="btn btn-delete" aria-label="Delete user John Doe">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U2" alt="User 2 Avatar">
</td>
<td>#U002</td>
<td>Jane Smith</td>
<td>jane.smith@example.com</td>
<td>Admin</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Jane Smith">View</button>
<button class="btn btn-edit" aria-label="Edit details for Jane Smith">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Jane Smith">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U3" alt="User 3 Avatar">
</td>
<td>#U003</td>
<td>Robert Johnson</td>
<td>robert.j@example.com</td>
<td>Customer</td>
<td>Inactive</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Robert Johnson">View</button>
<button class="btn btn-edit" aria-label="Edit details for Robert Johnson">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Robert Johnson">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U4" alt="User 4 Avatar">
</td>
<td>#U004</td>
<td>Emily White</td>
<td>emily.w@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Emily White">View</button>
<button class="btn btn-edit" aria-label="Edit details for Emily White">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Emily White">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U5" alt="User 5 Avatar">
</td>
<td>#U005</td>
<td>Michael Brown</td>
<td>michael.b@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Michael Brown">View</button>
<button class="btn btn-edit" aria-label="Edit details for Michael Brown">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Michael Brown">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search and Filter Users</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<div class="container">
<header class="section-header">
<h2>Manage Users</h2>
<p>Search, filter, and view details of registered users.</p>
</header>
<section class="filter-controls" aria-labelledby="user-filter-heading">
<h3 id="user-filter-heading" class="sr-only">Filter Users</h3>
<div class="filter-group">
<label for="search-name">Search by Name</label>
<input type="text" id="search-name" placeholder="E.g., John Doe">
</div>
<div class="filter-group">
<label for="search-email">Search by Email</label>
<input type="email" id="search-email" placeholder="E.g., john.doe@example.com">
</div>
<div class="filter-group">
<label for="user-role">Filter by Role</label>
<select id="user-role">
<option value="">All Roles</option>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="filter-group">
<button type="button">Apply Filters</button>
</div>
</section>
<main class="user-list" aria-live="polite">
<article class="user-card">
<h3>John Doe</h3>
<p><strong>Email:</strong> john.doe@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-01-15</p>
<p><strong>Total Orders:</strong> 5</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Jane Smith</h3>
<p><strong>Email:</strong> jane.smith@example.com</p>
<p><strong>Role:</strong> Admin</p>
<p><strong>Registered On:</strong> 2022-11-01</p>
<p><strong>Total Orders:</strong> N/A</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Alice Johnson</h3>
<p><strong>Email:</strong> alice.j@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-03-20</p>
<p><strong>Total Orders:</strong> 2</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Robert Brown</h3>
<p><strong>Email:</strong> rob.b@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-02-10</p>
<p><strong>Total Orders:</strong> 8</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Emily White</h3>
<p><strong>Email:</strong> emily.w@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-04-05</p>
<p><strong>Total Orders:</strong> 1</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Michael Green</h3>
<p><strong>Email:</strong> mike.g@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-05-12</p>
<p><strong>Total Orders:</strong> 0</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
</main>
</div>
<section class="user-details-section">
<h2 class="section-title">Account Information</h2>
<div class="user-info-group">
<div class="user-info-item">
<span class="info-label">Full Name:</span>
<span class="info-value">[User Full Name]</span>
</div>
<div class="user-info-item">
<span class="info-label">Email Address:</span>
<span class="info-value">[user@example.com]</span>
</div>
<div class="user-info-item">
<span class="info-label">Phone Number:</span>
<span class="info-value">[+1 (XXX) XXX-XXXX]</span>
</div>
<div class="user-info-item address-block">
<span class="info-label">Shipping Address:</span>
<span class="info-value">
[Street Address Line 1]<br>
[Street Address Line 2 (Optional)]<br>
[City], [State/Province] [ZIP/Postal Code]<br>
[Country]
</span>
</div>
</div>
<div class="user-actions">
<a href="/account/edit-profile" class="edit-profile-link">Edit Profile Information</a>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Role Management Controls</title>
<link rel="stylesheet" href="style.css" />
<section class="role-management-section" aria-labelledby="role-management-heading">
<h2 id="role-management-heading">Role Management Controls</h2>
<div class="role-management-controls-header">
<div class="search-bar">
<label for="role-search" class="sr-only">Search roles</label>
<input type="text" id="role-search" placeholder="Search by role name or user ID...">
</div>
<div class="filter-select">
<label for="role-filter" class="sr-only">Filter by status</label>
<select id="role-filter">
<option value="all">All Statuses</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending Assignment</option>
</select>
</div>
<button class="add-role-button" type="button">Add New Role</button>
</div>
<div class="table-container" role="region" aria-live="polite">
<table class="role-list-table">
<thead>
<tr>
<th scope="col">Role Name</th>
<th scope="col">Description</th>
<th scope="col">Assigned Users</th>
<th scope="col">Status</th>
<th scope="col">Last Modified</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Role Name">Administrator</td>
<td data-label="Description">Full control over all system features and data.</td>
<td data-label="Assigned Users">5</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-26</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Product Manager</td>
<td data-label="Description">Manages product catalog, pricing, and inventory.</td>
<td data-label="Assigned Users">3</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-20</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Order Processor</td>
<td data-label="Description">Handles order fulfillment, shipping, and returns.</td>
<td data-label="Assigned Users">7</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-25</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Customer Service</td>
<td data-label="Description">Manages customer inquiries and support tickets.</td>
<td data-label="Assigned Users">4</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-18</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Marketing Specialist</td>
<td data-label="Description">Manages promotional campaigns and website content.</td>
<td data-label="Assigned Users">2</td>
<td data-label="Status"><span class="role-status status-inactive">Inactive</span></td>
<td data-label="Last Modified">2023-09-15</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Guest User</td>
<td data-label="Description">Default role for unauthenticated website visitors.</td>
<td data-label="Assigned Users">N/A</td>
<td data-label="Status"><span class="role-status status-pending">Pending Assignment</span></td>
<td data-label="Last Modified">2023-08-01</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-controls" aria-label="Role list pagination">
<button type="button" aria-label="Previous page" disabled="">« Previous</button>
<span class="current-page">Page 1 of 5</span>
<button type="button" aria-label="Next page">Next »</button>
</nav>
</section>
<section class="password-reset-section">
<div class="password-reset-container">
<h1 class="section-title">Forgot Your Password?</h1>
<p class="section-description">Enter your registered email address below to receive a password reset link.</p>
<form class="password-reset-form" action="#" method="post">
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" id="email" name="email" class="form-input" placeholder="youremail@example.com" autocomplete="email" required="">
</div>
<button type="submit" class="submit-button">Send Reset Link</button>
</form>
<div class="form-footer">
<p class="footer-text">Remembered your password? <a href="#" class="footer-link">Back to Login</a></p>
<p class="footer-text">Need assistance? <a href="#" class="footer-link">Contact Support</a></p>
</div>
</div>
</section>
<section class="communication-tools-section">
<div class="container">
<h2 class="section-title">Connect With Us</h2>
<p class="section-description">We're here to assist you. Choose how you'd like to get in touch or find answers to your questions.</p>
<div class="communication-methods-grid">
<div class="method-card">
<div class="card-icon-placeholder icon-chat"></div>
<h3 class="card-title">Live Chat Support</h3>
<p class="card-description">Get instant assistance from our customer service team during business hours.</p>
<a href="#" class="btn btn-primary placeholder-button">Start Chat Now</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-email"></div>
<h3 class="card-title">Email Us</h3>
<p class="card-description">Send us your inquiries and we'll respond within 24-48 business hours.</p>
<a href="mailto:support@example.com" class="btn btn-secondary placeholder-button">Send an Email</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-phone"></div>
<h3 class="card-title">Call Us</h3>
<p class="card-description">Speak directly with our jewelry specialists for personalized assistance.</p>
<a href="tel:+1234567890" class="btn btn-secondary placeholder-button">Call: +1 (234) 567-890</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-faq"></div>
<h3 class="card-title">Frequently Asked Questions</h3>
<p class="card-description">Find quick answers to common questions about orders, products, and services.</p>
<a href="/faq" class="btn btn-secondary placeholder-button">View FAQs</a>
</div>
</div>
<div class="contact-form-section">
<h3 class="form-title">Send Us a Message</h3>
<p class="form-description">Prefer to write? Use the form below for general inquiries or feedback.</p>
<form action="#" method="POST" class="contact-form">
<div class="form-group">
<label for="name" class="visually-hidden">Your Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required="" class="form-input">
</div>
<div class="form-group">
<label for="email" class="visually-hidden">Your Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required="" class="form-input">
</div>
<div class="form-group">
<label for="subject" class="visually-hidden">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject (Optional)" class="form-input">
</div>
<div class="form-group">
<label for="message" class="visually-hidden">Your Message</label>
<textarea id="message" name="message" rows="5" placeholder="Your Message" required="" class="form-input"></textarea>
</div>
<button type="submit" class="btn btn-primary submit-button">Send Message</button>
</form>
</div>
<div class="social-media-links">
<h3 class="social-title">Connect with Us on Social Media</h3>
<p class="social-description">Stay updated with our latest collections, promotions, and stories.</p>
<div class="social-icons">
<a href="#" class="social-icon-placeholder icon-instagram" aria-label="Follow us on Instagram"></a>
<a href="#" class="social-icon-placeholder icon-facebook" aria-label="Follow us on Facebook"></a>
<a href="#" class="social-icon-placeholder icon-pinterest" aria-label="Follow us on Pinterest"></a>
<a href="#" class="social-icon-placeholder icon-youtube" aria-label="Subscribe to our YouTube channel"></a>
</div>
</div>
</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>User List Table</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search and Filter Users</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Role Management Controls</title>
<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>