Changed around line 1
+ // Sample inventory data
+ let inventory = [
+ { name: "Green Tea", category: "Tea", quantity: 50, status: "In Stock" },
+ { name: "Black Tea", category: "Tea", quantity: 20, status: "Low Stock" },
+ { name: "Herbal Tea", category: "Tea", quantity: 0, status: "Out of Stock" },
+ { name: "Matcha", category: "Powder", quantity: 30, status: "In Stock" },
+ { name: "Chai", category: "Tea", quantity: 10, status: "Low Stock" }
+ ];
+
+ // DOM Elements
+ const totalItemsEl = document.getElementById('total-items');
+ const lowStockEl = document.getElementById('low-stock');
+ const outOfStockEl = document.getElementById('out-of-stock');
+ const inventoryTableBody = document.querySelector('#inventory-table tbody');
+ const searchInput = document.getElementById('search');
+ const filterSelect = document.getElementById('filter');
+
+ // Update summary cards
+ function updateSummary() {
+ const total = inventory.length;
+ const low = inventory.filter(item => item.status === 'Low Stock').length;
+ const out = inventory.filter(item => item.status === 'Out of Stock').length;
+
+ totalItemsEl.textContent = total;
+ lowStockEl.textContent = low;
+ outOfStockEl.textContent = out;
+ }
+
+ // Render inventory table
+ function renderTable(data) {
+ inventoryTableBody.innerHTML = '';
+ data.forEach(item => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+
${item.name} | +
${item.category} | +
${item.quantity} | +
${item.status} | + `;
+ inventoryTableBody.appendChild(row);
+ });
+ }
+
+ // Filter and search functionality
+ function filterInventory() {
+ const searchTerm = searchInput.value.toLowerCase();
+ const filterValue = filterSelect.value;
+
+ let filtered = inventory.filter(item =>
+ item.name.toLowerCase().includes(searchTerm)
+ );
+
+ if (filterValue !== 'all') {
+ filtered = filtered.filter(item =>
+ filterValue === 'low' ? item.status === 'Low Stock' : item.status === 'Out of Stock'
+ );
+ }
+
+ renderTable(filtered);
+ }
+
+ // Initial setup
+ function init() {
+ updateSummary();
+ renderTable(inventory);
+
+ // Event listeners
+ searchInput.addEventListener('input', filterInventory);
+ filterSelect.addEventListener('change', filterInventory);
+ }
+
+ // Initialize the app
+ init();
