Update events.js

events.js

@@ -1,6 +1,6 @@
 // events.js - Manages all event listeners
 
-import { appState, saveState, loadState } from './state.js';
+import { appState, saveState } from './state.js';
 import { handleUpdateStock, handleRestock } from './services.js';
 import { refreshUI, showToast, renderReport } from './ui.js';
 
@@ -12,12 +12,12 @@ export function attachAllListeners() {
 }
 
 function attachProductInputListeners() {
-    document.querySelectorAll('.product-card .update-btn').forEach(btn => {
+    document.querySelectorAll('.update-btn').forEach(btn => {
         if (btn.dataset.listenerAttached) return;
         btn.dataset.listenerAttached = true;
         btn.addEventListener('click', (e) => {
-            const card = e.target.closest('.product-card');
-            const productName = card.dataset.productName;
+            const card = e.target.closest('.dashboard-card');
+            const productName = Object.keys(appState.productRecipes).find(name => card.innerHTML.includes(name));
             const quantity = parseInt(card.querySelector('input').value, 10);
             handleUpdateStock(productName, quantity);
         });
@@ -30,12 +30,12 @@ function attachMaxStockEditListeners() {
         icon.dataset.listenerAttached = true;
         icon.addEventListener('click', (e) => {
             const valueSpan = e.target.closest('.flex').querySelector('.max-stock-value');
-            const materialName = e.target.closest('.material-card').dataset.materialName;
+            const materialName = e.target.closest('.dashboard-card').dataset.materialName;
             const material = appState.materials.find(m => m.name === materialName);
             const input = document.createElement('input');
             input.type = 'number';
             input.value = material.maxStock;
-            input.className = 'w-20 text-right font-semibold border rounded px-1';
+            input.className = 'input-field w-20 text-right font-semibold';
             valueSpan.replaceWith(input);
             input.focus();
             input.select();
@@ -65,7 +65,7 @@ function attachRestockListeners() {
         if (formContainer.classList.contains('hidden')) {
             document.querySelectorAll('.restock-form').forEach(f => { f.classList.add('hidden'); f.innerHTML = ''; });
             formContainer.classList.remove('hidden');
-            formContainer.innerHTML = `<div class="flex items-center gap-2"><input type="number" placeholder="Qty" class="input-number w-20 px-2 py-1 border border-gray-300 rounded"><button class="confirm-restock-btn px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600">Add</button></div>`;
+            formContainer.innerHTML = `<div class="flex items-center gap-2"><input type="number" placeholder="Qty" class="input-field w-20"><button class="btn btn-primary text-xs confirm-restock-btn">Add</button></div>`;
             const input = formContainer.querySelector('input');
             input.focus();
             formContainer.querySelector('.confirm-restock-btn').addEventListener('click', () => { handleRestock(materialName, parseInt(input.value, 10)); });
@@ -86,7 +86,6 @@ function attachModalListeners() {
     const resetModal = document.getElementById('reset-modal');
     const reportsModal = document.getElementById('reports-modal');
     
-    // Reset Modal
     const showResetModalBtn = document.getElementById('show-reset-modal-btn');
     if (!showResetModalBtn.dataset.listenerAttachedForReset) {
         showResetModalBtn.addEventListener('click', () => resetModal.classList.remove('hidden'));
@@ -102,7 +101,6 @@ function attachModalListeners() {
         showResetModalBtn.dataset.listenerAttachedForReset = true;
     }
 
-    // Reports Modal
     const showReportsModalBtn = document.getElementById('show-reports-modal-btn');
     if (!showReportsModalBtn.dataset.listenerAttachedForReports) {
         showReportsModalBtn.addEventListener('click', () => reportsModal.classList.remove('hidden'));