Order Management System

Here's a comprehensive UI solution for an order management system with client and admin views: Order Management System

Track Your Order

Order ID

Order Management

Order ID	Customer	Date	Status	Progress	Actions
ORD-12345	John Doe	2023-11-15	Processing
ORD-12344	Jane Smith	2023-11-14	Delivered

/* Main styles */ body { background-color: #f8f9fa; } /* Timeline styles */ .timeline { position: relative; padding-left: 1.5rem; } .timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #dee2e6; } .timeline-item { position: relative; padding-bottom: 1.5rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-point { position: absolute; left: -1.5rem; width: 1rem; height: 1rem; border-radius: 50%; background-color: #adb5bd; top: 0.25rem; } .timeline-item.active .timeline-point { background-color: #0d6efd; } .timeline-content { padding-left: 1rem; } /* Table styles */ .table-responsive { overflow-x: auto; } /* Progress bar animation */ .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { 0% { background-position-x: 1rem; } } document.addEventListener('DOMContentLoaded', function() { // Toggle between client and admin views const clientViewLink = document.getElementById('client-view-link'); const adminViewLink = document.getElementById('admin-view-link'); const clientView = document.getElementById('client-view'); const adminView = document.getElementById('admin-view'); const loginBtn = document.getElementById('login-btn'); // Sample data let isAdmin = false; const orders = [ { id: 'ORD-12345', customer: 'John Doe', date: '2023-11-15', status: 'processing', progress: 50, notes: 'Waiting for payment confirmation' }, { id: 'ORD-12344', customer: 'Jane Smith', date: '2023-11-14', status: 'delivered', progress: 100, notes: 'Delivered successfully' } ]; // View toggle functionality clientViewLink.addEventListener('click', function(e) { e.preventDefault(); clientView.classList.remove('d-none'); adminView.classList.add('d-none'); clientViewLink.classList.add('active'); adminViewLink.classList.remove('active'); }); adminViewLink.addEventListener('click', function(e) { e.preventDefault(); if (!isAdmin) { showLoginModal(); return; } clientView.classList.add('d-none'); adminView.classList.remove('d-none'); clientViewLink.classList.remove('active'); adminViewLink.classList.add('active'); }); // Login button loginBtn.addEventListener('click', showLoginModal); function showLoginModal() { // In a real app, this would show a login form const password = prompt('Enter admin password:'); if (password === 'admin123') { isAdmin = true; loginBtn.textContent = 'Logout'; loginBtn.classList.remove('btn-outline-light'); loginBtn.classList.add('btn-light'); adminViewLink.click(); } else if (password) { alert('Incorrect password'); } } // Track order functionality const trackBtn = document.getElementById('track-btn'); const orderIdInput = document.getElementById('order-id'); const orderDetails = document.getElementById('order-details'); trackBtn.addEventListener('click', function() { const orderId = orderIdInput.value.trim(); if (orderId) { // In a real app, this would fetch from server const order = orders.find(o => o.id === orderId); if (order) { document.getElementById('order-number').textContent = order.id; document.getElementById('order-status').textContent = order.status.charAt(0).toUpperCase() + order.status.slice(1); document.getElementById('order-status').className = `badge bg-${getStatusClass(order.status)}`; document.getElementById('order-progress').style.width = `${order.progress}%`; document.getElementById('order-progress').className = `progress-bar progress-bar-striped ${order.progress < 100 ? 'progress-bar-animated' : ''} bg-${getStatusClass(order.status)}`; // Update timeline const timelineItems = document.querySelectorAll('.timeline-item'); timelineItems.forEach((item, index) => { if (index * 25 <= order.progress) { item.classList.add('active'); } else { item.classList.remove('active'); } }); orderDetails.classList.remove('d-none'); } else { alert('Order not found'); } } else { alert('Please enter an order ID'); } }); // Admin functionality const refreshBtn = document.getElementById('refresh-orders'); const addOrderBtn = document.getElementById('add-order'); const ordersTable = document.getElementById('orders-table'); const orderModal = new bootstrap.Modal(document.getElementById('orderModal')); refreshBtn.addEventListener('click', function() { // In a real app, this would fetch from server renderOrdersTable(); }); addOrderBtn.addEventListener('click', function() { // Reset form document.getElementById('order-form').reset(); document.getElementById('status-select').value = 'pending'; document.getElementById('progress-range').value = '0'; orderModal.show(); }); function renderOrdersTable() { ordersTable.innerHTML = ''; orders.forEach(order => { const row = document.createElement('tr'); row.innerHTML = ` ${order.id} ${order.customer} ${order.date} ${order.status.charAt(0).toUpperCase() + order.status.slice(1)}

`; ordersTable.appendChild(row); }); // Add event listeners to edit and delete buttons document.querySelectorAll('.edit-btn').forEach(btn => { btn.addEventListener('click', function() { const orderId = this.getAttribute('data-id'); const order = orders.find(o => o.id === orderId); if (order) { // Fill the form document.querySelector('#order-form input[type="text"]').value = order.id; document.querySelector('#order-form input:nth-of-type(2)').value = order.customer; document.getElementById('status-select').value = order.status; document.getElementById('progress-range').value = order.progress; document.querySelector('#order-form textarea').value = order.notes; orderModal.show(); } }); }); document.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', function() { const orderId = this.getAttribute('data-id'); if (confirm(`Are you sure you want to delete order ${orderId}?`)) { // In a real app, this would delete from server const index = orders.findIndex(o => o.id === orderId); if (index !== -1) { orders.splice(index, 1); renderOrdersTable(); } } }); }); } // Helper function to get status class function getStatusClass(status) { switch(status) { case 'pending': return 'secondary'; case 'processing': return 'warning'; case 'shipped': return 'info'; case 'delivered': return 'success'; case 'cancelled': return 'danger'; default: return 'primary'; } } // Initialize renderOrdersTable(); });

Track Your Order

Order #12345

Order Placed

Processing

Shipped

Delivered