ShopEase Pro

Here's an enhanced version with caching, admin dashboard, and mock database functionality: ShopEase Pro

ID	Name	Price	Actions

Order ID	Customer	Total	Status

ID	Username	Email	Role

Cache Key	Expires	Size

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; } .navbar { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card { transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 20px; height: 100%; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .product-img { height: 200px; object-fit: cover; } .btn-add-to-cart { width: 100%; } .admin-table img { max-width: 50px; max-height: 50px; } .cache-item { font-family: monospace; } // Mock database const database = { products: [ { id: 1, name: "Wireless Headphones", price: 99.99, image: "https://via.placeholder.com/300", description: "Noise cancelling wireless headphones" }, { id: 2, name: "Smart Watch", price: 199.99, image: "https://via.placeholder.com/300", description: "Latest smart watch with health tracking" }, { id: 3, name: "Bluetooth Speaker", price: 79.99, image: "https://via.placeholder.com/300", description: "Portable bluetooth speaker" } ], orders: [ { id: 1001, customer: "John Doe", total: 279.98, status: "Shipped" }, { id: 1002, customer: "Jane Smith", total: 99.99, status: "Processing" } ], users: [ { id: 1, username: "admin", email: "admin@shopease.com", role: "Admin" }, { id: 2, username: "johndoe", email: "john@example.com", role: "Customer" } ] }; // Cache implementation const cache = { data: {}, set: function(key, value, ttl = 300) { const expires = Date.now() + ttl * 1000; this.data[key] = { value, expires }; }, get: function(key) { const item = this.data[key]; if (!item) return null; if (Date.now() > item.expires) { delete this.data[key]; return null; } return item.value; }, clear: function() { this.data = {}; }, getAll: function() { const now = Date.now(); return Object.entries(this.data).map(([key, { expires }]) => ({ key, expires: new Date(expires).toLocaleTimeString(), size: JSON.stringify(this.data[key].value).length })); } }; // Cache API responses function fetchWithCache(url) { const cached = cache.get(url); if (cached) { console.log(`Serving from cache: ${url}`); return Promise.resolve(cached); } // Simulate API call return new Promise(resolve => { setTimeout(() => { let data; if (url === '/api/products') data = database.products; else if (url === '/api/orders') data = database.orders; else if (url === '/api/users') data = database.users; console.log(`Fetching from API: ${url}`); cache.set(url, data); resolve(data); }, 500); // Simulate network delay }); } // DOM elements const productsContainer = document.getElementById('products'); const clientLoginBtn = document.getElementById('clientLoginBtn'); const adminLoginBtn = document.getElementById('adminLoginBtn'); const loginModal = new bootstrap.Modal(document.getElementById('loginModal')); const adminDashboard = new bootstrap.Modal(document.getElementById('adminDashboard')); const addProductModal = new bootstrap.Modal(document.getElementById('addProductModal')); const loginForm = document.getElementById('loginForm'); const addProductForm = document.getElementById('addProductForm'); const modalTitle = document.getElementById('modalTitle'); const productsTableBody = document.getElementById('productsTableBody'); const ordersTableBody = document.getElementById('ordersTableBody'); const usersTableBody = document.getElementById('usersTableBody'); const cacheTableBody = document.getElementById('cacheTableBody'); const clearCacheBtn = document.getElementById('clearCacheBtn'); // Render products async function renderProducts() { const products = await fetchWithCache('/api/products'); productsContainer.innerHTML = ''; products.forEach(product => { const productCard = `

${product.name}

$${product.price.toFixed(2)}

${product.description}

`; productsContainer.innerHTML += productCard; }); } // Render admin tables function renderAdminTables() { // Products table productsTableBody.innerHTML = database.products.map(product => ` ${product.id} ${product.name} $${product.price.toFixed(2)} `).join(''); // Orders table ordersTableBody.innerHTML = database.orders.map(order => ` ${order.id} ${order.customer} $${order.total.toFixed(2)} ${order.status} `).join(''); // Users table usersTableBody.innerHTML = database.users.map(user => ` ${user.id} ${user.username} ${user.email} ${user.role} `).join(''); // Cache table updateCacheTable(); } function updateCacheTable() { const cacheItems = cache.getAll(); cacheTableBody.innerHTML = cacheItems.map(item => ` ${item.key} ${item.expires} ${item.size} bytes `).join(''); } // Event listeners clientLoginBtn.addEventListener('click', () => { modalTitle.textContent = 'Client Login'; loginModal.show(); }); adminLoginBtn.addEventListener('click', () => { modalTitle.textContent = 'Admin Login'; loginModal.show(); }); loginForm.addEventListener('submit', (e) => { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Simple authentication if (modalTitle.textContent === 'Admin Login' && username === 'admin' && password === 'admin123') { loginModal.hide(); renderAdminTables(); adminDashboard.show(); } else if (modalTitle.textContent === 'Client Login') { loginModal.hide(); alert(`Welcome back, ${username}!`); } else { alert('Invalid credentials'); } }); addProductForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('productName').value; const price = parseFloat(document.getElementById('productPrice').value); const image = document.getElementById('productImage').value; const description = document.getElementById('productDescription').value; const newProduct = { id: database.products.length + 1, name, price, image, description }; database.products.push(newProduct); cache.clear(); // Clear cache when data changes renderProducts(); renderAdminTables(); addProductForm.reset(); addProductModal.hide(); }); clearCacheBtn.addEventListener('click', () => { cache.clear(); updateCacheTable(); }); // Initialize renderProducts(); // Simulate periodic cache updates setInterval(updateCacheTable, 1000);

Login

Admin Dashboard

Add New Product

${product.name}