687 lines
39 KiB
HTML
687 lines
39 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Admin Order 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>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Order List - Jewelry Store</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<main class="container">
|
||
<h2>Your Order History</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="order-list-table" role="table" aria-label="List of your past orders">
|
||
<caption class="sr-only">Detailed list of customer's previous orders.</caption>
|
||
<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 data-label="Order ID" class="order-id">#ORD-2023001</td>
|
||
<td data-label="Date" class="order-date">2023-10-26</td>
|
||
<td data-label="Total" class="order-total">$1,250.00</td>
|
||
<td data-label="Status" class="order-status completed">Completed</td>
|
||
<td data-label="Actions">
|
||
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023001">View Details</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Order ID" class="order-id">#ORD-2023002</td>
|
||
<td data-label="Date" class="order-date">2023-11-01</td>
|
||
<td data-label="Total" class="order-total">$350.50</td>
|
||
<td data-label="Status" class="order-status shipped">Shipped</td>
|
||
<td data-label="Actions">
|
||
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023002">View Details</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Order ID" class="order-id">#ORD-2023003</td>
|
||
<td data-label="Date" class="order-date">2023-11-05</td>
|
||
<td data-label="Total" class="order-total">$899.99</td>
|
||
<td data-label="Status" class="order-status pending">Pending</td>
|
||
<td data-label="Actions">
|
||
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023003">View Details</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Order ID" class="order-id">#ORD-2023004</td>
|
||
<td data-label="Date" class="order-date">2023-11-10</td>
|
||
<td data-label="Total" class="order-total">$2,100.00</td>
|
||
<td data-label="Status" class="order-status completed">Completed</td>
|
||
<td data-label="Actions">
|
||
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023004">View Details</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Order ID" class="order-id">#ORD-2023005</td>
|
||
<td data-label="Date" class="order-date">2023-11-15</td>
|
||
<td data-label="Total" class="order-total">$150.00</td>
|
||
<td data-label="Status" class="order-status cancelled">Cancelled</td>
|
||
<td data-label="Actions">
|
||
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023005">View Details</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|
||
<section class="orders-section">
|
||
<header class="orders-header">
|
||
<h2>Search and Filter Orders</h2>
|
||
</header>
|
||
|
||
<div class="orders-controls-container">
|
||
<form class="search-bar">
|
||
<label for="orderSearch" class="visually-hidden">Search orders by Order ID or Customer Name</label>
|
||
<input type="search" id="orderSearch" placeholder="Search by Order ID, Customer Name..." class="search-input">
|
||
<button type="submit" class="btn btn-primary">Search</button>
|
||
</form>
|
||
|
||
<form class="filters-container">
|
||
<fieldset class="filter-group">
|
||
<legend class="visually-hidden">Order Filters</legend>
|
||
|
||
<div class="filter-item">
|
||
<label for="statusFilter">Status:</label>
|
||
<select id="statusFilter" class="filter-select">
|
||
<option value="">All Statuses</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="processing">Processing</option>
|
||
<option value="shipped">Shipped</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="cancelled">Cancelled</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="startDate">From Date:</label>
|
||
<input type="date" id="startDate" class="filter-date">
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="endDate">To Date:</label>
|
||
<input type="date" id="endDate" class="filter-date">
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="itemFilter">Jewelry Item:</label>
|
||
<input type="text" id="itemFilter" placeholder="e.g., Diamond Ring" class="filter-input">
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="filter-actions">
|
||
<button type="submit" class="btn btn-secondary">Apply Filters</button>
|
||
<button type="reset" class="btn btn-secondary-outline">Clear Filters</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="order-list-container table-responsive">
|
||
<table class="order-list-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Order ID</th>
|
||
<th>Customer</th>
|
||
<th>Date</th>
|
||
<th>Items</th>
|
||
<th>Total</th>
|
||
<th>Status</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>#ORD001</td>
|
||
<td>Jane Doe</td>
|
||
<td>2023-10-26</td>
|
||
<td>Diamond Ring (1), Gold Necklace (1)</td>
|
||
<td>₹ 1,50,000</td>
|
||
<td><span class="status status-delivered">Delivered</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD002</td>
|
||
<td>John Smith</td>
|
||
<td>2023-10-25</td>
|
||
<td>Emerald Earrings (1)</td>
|
||
<td>₹ 55,000</td>
|
||
<td><span class="status status-shipped">Shipped</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD003</td>
|
||
<td>Alice Johnson</td>
|
||
<td>2023-10-24</td>
|
||
<td>Pearl Bangle (2)</td>
|
||
<td>₹ 30,000</td>
|
||
<td><span class="status status-pending">Pending</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD004</td>
|
||
<td>Bob Williams</td>
|
||
<td>2023-10-23</td>
|
||
<td>Silver Pendant (1)</td>
|
||
<td>₹ 8,000</td>
|
||
<td><span class="status status-cancelled">Cancelled</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD005</td>
|
||
<td>Maria Garcia</td>
|
||
<td>2023-10-22</td>
|
||
<td>Ruby Ring (1), Gold Chain (1)</td>
|
||
<td>₹ 95,000</td>
|
||
<td><span class="status status-processing">Processing</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<!-- More order rows would be added here dynamically -->
|
||
</tbody>
|
||
</table>
|
||
<p class="no-orders-message visually-hidden">No orders found matching your criteria.</p>
|
||
</div>
|
||
</section>
|
||
<section class="user-dashboard-section" aria-labelledby="recent-orders-heading">
|
||
<h2 id="recent-orders-heading" class="section-title">Your Recent Orders</h2>
|
||
|
||
<div class="order-list-container">
|
||
<!-- Individual Order Card 1 -->
|
||
<article class="order-card">
|
||
<div class="order-summary-header">
|
||
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20231026-001</span></h3>
|
||
<p class="order-date">Placed On: <span class="order-value">October 26, 2023</span></p>
|
||
</div>
|
||
<div class="order-summary-details">
|
||
<p class="order-total">Order Total: <span class="order-value">$1,250.00</span></p>
|
||
<p class="order-items-count">Items: <span class="order-value">3</span></p>
|
||
</div>
|
||
<div class="order-action-link">
|
||
<a href="/user/orders/JEWEL20231026-001" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20231026-001">
|
||
View Order Details
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Wireframe Placeholder for more orders -->
|
||
<article class="order-card order-card-placeholder">
|
||
<div class="order-summary-header">
|
||
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20230915-002</span></h3>
|
||
<p class="order-date">Placed On: <span class="order-value">September 15, 2023</span></p>
|
||
</div>
|
||
<div class="order-summary-details">
|
||
<p class="order-total">Order Total: <span class="order-value">$780.00</span></p>
|
||
<p class="order-items-count">Items: <span class="order-value">1</span></p>
|
||
</div>
|
||
<div class="order-action-link">
|
||
<a href="/user/orders/JEWEL20230915-002" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20230915-002">
|
||
View Order Details
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Optional: Link to full order history -->
|
||
<div class="view-all-orders">
|
||
<a href="/user/orders/history" class="btn btn-secondary view-all-link">
|
||
View All Order History
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Order Status Update Form</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<section aria-labelledby="order-status-heading">
|
||
<h2 id="order-status-heading">Update Order Status</h2>
|
||
<p class="description">Admins can use this form to update the status and details of existing orders.</p>
|
||
|
||
<form action="#" method="POST" aria-live="polite">
|
||
<div class="form-group">
|
||
<label for="order-id">Order ID:</label>
|
||
<input type="text" id="order-id" name="orderId" placeholder="e.g., ORD-2023-12345" required aria-required="true">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="customer-email">Customer Email (Optional for lookup):</label>
|
||
<input type="email" id="customer-email" name="customerEmail" placeholder="customer@example.com">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="status">Current Status:</label>
|
||
<select id="status" name="status" required aria-required="true">
|
||
<option value="">-- Select Status --</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="processing">Processing</option>
|
||
<option value="shipped">Shipped</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="cancelled">Cancelled</option>
|
||
<option value="refunded">Refunded</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tracking-number">Tracking Number (Optional):</label>
|
||
<input type="text" id="tracking-number" name="trackingNumber" placeholder="e.g., ABC123DEF456GHI789">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">Internal Notes:</label>
|
||
<textarea id="notes" name="notes" rows="4" placeholder="Add any relevant internal notes about this order..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit">Update Order</button>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<main class="export-orders-section">
|
||
<div class="container">
|
||
<header class="section-header">
|
||
<h1 class="section-title">Export Orders Data</h1>
|
||
<p class="section-description">Generate and download comprehensive order data in various formats for analysis and record-keeping.</p>
|
||
</header>
|
||
|
||
<section class="export-form-panel">
|
||
<form action="#" method="post" class="export-form">
|
||
<div class="form-group">
|
||
<label for="date-start" class="form-label">Order Date From:</label>
|
||
<input type="date" id="date-start" name="date_start" class="form-input" value="2023-01-01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="date-end" class="form-label">Order Date To:</label>
|
||
<input type="date" id="date-end" name="date_end" class="form-input" value="2023-12-31">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="order-status" class="form-label">Order Status:</label>
|
||
<select id="order-status" name="order_status" class="form-select">
|
||
<option value="all">All Statuses</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="processing">Processing</option>
|
||
<option value="shipped">Shipped</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="cancelled">Cancelled</option>
|
||
<option value="refunded">Refunded</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="export-format" class="form-label">Export Format:</label>
|
||
<select id="export-format" name="export_format" class="form-select">
|
||
<option value="csv">CSV (Comma Separated Values)</option>
|
||
<option value="xlsx">Excel (XLSX)</option>
|
||
<option value="pdf">PDF (Printable Document Format)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">
|
||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
|
||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||
</svg>
|
||
Export Data
|
||
</button>
|
||
<button type="button" class="btn btn-secondary btn-reset">Reset Filters</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<div class="export-status-message">
|
||
<p class="status-placeholder">
|
||
<span class="icon-placeholder">ℹ️</span> Your export will begin shortly. The download link will appear here once ready.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Shipping Label Generation</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<section class="section-shipping-label" aria-labelledby="shippingLabelHeading">
|
||
<h2 id="shippingLabelHeading">Generate Shipping Label</h2>
|
||
<div class="shipping-label-content">
|
||
<div class="shipping-label-info">
|
||
<p>Click the button below to generate a printable shipping label for your recent orders.</p>
|
||
<p>Ensure your printer is connected and ready. Labels will be generated in PDF format.</p>
|
||
<p>This feature is available for processed orders awaiting shipment.</p>
|
||
</div>
|
||
<a href="#" class="label-generation-cta" role="button" aria-label="Generate Shipping Label PDF">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||
<path d="M19 8H5c-1.1 0-2 .9-2 2v6h4v4h10v-4h4v-6c0-1.1-.9-2-2-2zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
|
||
</svg>
|
||
Generate Label
|
||
</a>
|
||
<div class="admin-note">
|
||
<p><em>(For Admin Use Only)</em></p>
|
||
<p>This link provides a quick access point for administrators to generate and print shipping labels for customer orders. Verify order details before printing.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<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"></input><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 & 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>
|
||
<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>Order List - Jewelry Store</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<div class="container">
|
||
<section class="section-shipping-label" aria-labelledby="shippingLabelHeading">
|
||
<h2 id="shippingLabelHeading">Generate Shipping Label</h2>
|
||
<div class="shipping-label-content">
|
||
<div class="shipping-label-info">
|
||
<p>Click the button below to generate a printable shipping label for your recent orders.</p>
|
||
<p>Ensure your printer is connected and ready. Labels will be generated in PDF format.</p>
|
||
<p>This feature is available for processed orders awaiting shipment.</p>
|
||
</div>
|
||
<a href="#" class="label-generation-cta" role="button" aria-label="Generate Shipping Label PDF">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||
<path d="M19 8H5c-1.1 0-2 .9-2 2v6h4v4h10v-4h4v-6c0-1.1-.9-2-2-2zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path>
|
||
</svg>
|
||
Generate Label
|
||
</a>
|
||
<div class="admin-note">
|
||
<p><em>(For Admin Use Only)</em></p>
|
||
<p>This link provides a quick access point for administrators to generate and print shipping labels for customer orders. Verify order details before printing.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<section class="orders-section">
|
||
<header class="orders-header">
|
||
<h2>Search and Filter Orders</h2>
|
||
</header>
|
||
|
||
<div class="orders-controls-container">
|
||
<form class="search-bar">
|
||
<label for="orderSearch" class="visually-hidden">Search orders by Order ID or Customer Name</label>
|
||
<input type="search" id="orderSearch" placeholder="Search by Order ID, Customer Name..." class="search-input">
|
||
<button type="submit" class="btn btn-primary">Search</button>
|
||
</form>
|
||
|
||
<form class="filters-container">
|
||
<fieldset class="filter-group">
|
||
<legend class="visually-hidden">Order Filters</legend>
|
||
|
||
<div class="filter-item">
|
||
<label for="statusFilter">Status:</label>
|
||
<select id="statusFilter" class="filter-select">
|
||
<option value="">All Statuses</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="processing">Processing</option>
|
||
<option value="shipped">Shipped</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="cancelled">Cancelled</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="startDate">From Date:</label>
|
||
<input type="date" id="startDate" class="filter-date">
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="endDate">To Date:</label>
|
||
<input type="date" id="endDate" class="filter-date">
|
||
</div>
|
||
|
||
<div class="filter-item">
|
||
<label for="itemFilter">Jewelry Item:</label>
|
||
<input type="text" id="itemFilter" placeholder="e.g., Diamond Ring" class="filter-input">
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="filter-actions">
|
||
<button type="submit" class="btn btn-secondary">Apply Filters</button>
|
||
<button type="reset" class="btn btn-secondary-outline">Clear Filters</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="order-list-container table-responsive">
|
||
<table class="order-list-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Order ID</th>
|
||
<th>Customer</th>
|
||
<th>Date</th>
|
||
<th>Items</th>
|
||
<th>Total</th>
|
||
<th>Status</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>#ORD001</td>
|
||
<td>Jane Doe</td>
|
||
<td>2023-10-26</td>
|
||
<td>Diamond Ring (1), Gold Necklace (1)</td>
|
||
<td>₹ 1,50,000</td>
|
||
<td><span class="status status-delivered">Delivered</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD002</td>
|
||
<td>John Smith</td>
|
||
<td>2023-10-25</td>
|
||
<td>Emerald Earrings (1)</td>
|
||
<td>₹ 55,000</td>
|
||
<td><span class="status status-shipped">Shipped</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD003</td>
|
||
<td>Alice Johnson</td>
|
||
<td>2023-10-24</td>
|
||
<td>Pearl Bangle (2)</td>
|
||
<td>₹ 30,000</td>
|
||
<td><span class="status status-pending">Pending</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD004</td>
|
||
<td>Bob Williams</td>
|
||
<td>2023-10-23</td>
|
||
<td>Silver Pendant (1)</td>
|
||
<td>₹ 8,000</td>
|
||
<td><span class="status status-cancelled">Cancelled</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>#ORD005</td>
|
||
<td>Maria Garcia</td>
|
||
<td>2023-10-22</td>
|
||
<td>Ruby Ring (1), Gold Chain (1)</td>
|
||
<td>₹ 95,000</td>
|
||
<td><span class="status status-processing">Processing</span></td>
|
||
<td><a href="#" class="btn-small">View</a></td>
|
||
</tr>
|
||
<!-- More order rows would be added here dynamically -->
|
||
</tbody>
|
||
</table>
|
||
<p class="no-orders-message visually-hidden">No orders found matching your criteria.</p>
|
||
</div>
|
||
</section>
|
||
<section class="user-dashboard-section" aria-labelledby="recent-orders-heading">
|
||
<h2 id="recent-orders-heading" class="section-title">Your Recent Orders</h2>
|
||
|
||
<div class="order-list-container">
|
||
<!-- Individual Order Card 1 -->
|
||
<article class="order-card">
|
||
<div class="order-summary-header">
|
||
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20231026-001</span></h3>
|
||
<p class="order-date">Placed On: <span class="order-value">October 26, 2023</span></p>
|
||
</div>
|
||
<div class="order-summary-details">
|
||
<p class="order-total">Order Total: <span class="order-value">$1,250.00</span></p>
|
||
<p class="order-items-count">Items: <span class="order-value">3</span></p>
|
||
</div>
|
||
<div class="order-action-link">
|
||
<a href="/user/orders/JEWEL20231026-001" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20231026-001">
|
||
View Order Details
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Wireframe Placeholder for more orders -->
|
||
<article class="order-card order-card-placeholder">
|
||
<div class="order-summary-header">
|
||
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20230915-002</span></h3>
|
||
<p class="order-date">Placed On: <span class="order-value">September 15, 2023</span></p>
|
||
</div>
|
||
<div class="order-summary-details">
|
||
<p class="order-total">Order Total: <span class="order-value">$780.00</span></p>
|
||
<p class="order-items-count">Items: <span class="order-value">1</span></p>
|
||
</div>
|
||
<div class="order-action-link">
|
||
<a href="/user/orders/JEWEL20230915-002" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20230915-002">
|
||
View Order Details
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Optional: Link to full order history -->
|
||
<div class="view-all-orders">
|
||
<a href="/user/orders/history" class="btn btn-secondary view-all-link">
|
||
View All Order History
|
||
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Order Status Update Form</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<main class="export-orders-section">
|
||
<div class="container">
|
||
<header class="section-header">
|
||
<h1 class="section-title">Export Orders Data</h1>
|
||
<p class="section-description">Generate and download comprehensive order data in various formats for analysis and record-keeping.</p>
|
||
</header>
|
||
|
||
<section class="export-form-panel">
|
||
<form action="#" method="post" class="export-form">
|
||
<div class="form-group">
|
||
<label for="date-start" class="form-label">Order Date From:</label>
|
||
<input type="date" id="date-start" name="date_start" class="form-input" value="2023-01-01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="date-end" class="form-label">Order Date To:</label>
|
||
<input type="date" id="date-end" name="date_end" class="form-input" value="2023-12-31">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="order-status" class="form-label">Order Status:</label>
|
||
<select id="order-status" name="order_status" class="form-select">
|
||
<option value="all">All Statuses</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="processing">Processing</option>
|
||
<option value="shipped">Shipped</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="cancelled">Cancelled</option>
|
||
<option value="refunded">Refunded</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="export-format" class="form-label">Export Format:</label>
|
||
<select id="export-format" name="export_format" class="form-select">
|
||
<option value="csv">CSV (Comma Separated Values)</option>
|
||
<option value="xlsx">Excel (XLSX)</option>
|
||
<option value="pdf">PDF (Printable Document Format)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">
|
||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
|
||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
|
||
</svg>
|
||
Export Data
|
||
</button>
|
||
<button type="button" class="btn btn-secondary btn-reset">Reset Filters</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<div class="export-status-message">
|
||
<p class="status-placeholder">
|
||
<span class="icon-placeholder">ℹ️</span> Your export will begin shortly. The download link will appear here once ready.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Shipping Label Generation</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
<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 & 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>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.body.style.display = 'none';
|
||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |