Update events.js

events.js

@@ -1,13 +1,15 @@
 // events.js - Manages all event listeners
 
-import { appState, saveState } from './state.js';
+import { appState, saveState, loadState } from './state.js';
 import { handleUpdateStock, handleRestock } from './services.js';
 import { refreshUI, showToast, renderReport } from './ui.js';
+import { generatePurchaseOrder } from './purchaseOrderService.js';
 
 export function attachAllListeners() {
     attachProductInputListeners();
     attachMaxStockEditListeners();
     attachRestockListeners();
+    attachPurchaseOrderListeners();
     attachModalListeners();
 }
 
@@ -57,28 +59,42 @@ function attachMaxStockEditListeners() {
 }
 
 function attachRestockListeners() {
-    const showRestockForm = (e) => {
-        const parentEl = e.target.closest('[data-material-name]');
-        const materialName = parentEl.dataset.materialName;
-        const formContainer = parentEl.querySelector('.restock-form');
+    document.querySelectorAll('.restock-icon').forEach(btn => {
+        if (btn.dataset.listenerAttached) return;
+        btn.dataset.listenerAttached = true;
+        btn.addEventListener('click', (e) => {
+            const parentEl = e.target.closest('[data-material-name]');
+            const materialName = parentEl.dataset.materialName;
+            const formContainer = parentEl.querySelector('.restock-form');
 
-        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-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)); });
-            input.addEventListener('keydown', (event) => { if (event.key === 'Enter') handleRestock(materialName, parseInt(input.value, 10)); if (event.key === 'Escape') formContainer.classList.add('hidden'); });
-        } else {
-            formContainer.classList.add('hidden');
-            formContainer.innerHTML = '';
-        }
-    };
-    document.querySelectorAll('.restock-icon, .restock-btn-reorder').forEach(btn => {
+            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-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)); });
+                input.addEventListener('keydown', (event) => { if (event.key === 'Enter') handleRestock(materialName, parseInt(input.value, 10)); if (event.key === 'Escape') formContainer.classList.add('hidden'); });
+            } else {
+                formContainer.classList.add('hidden');
+                formContainer.innerHTML = '';
+            }
+        });
+    });
+}
+
+function attachPurchaseOrderListeners() {
+    document.querySelectorAll('.generate-po-btn').forEach(btn => {
         if (btn.dataset.listenerAttached) return;
         btn.dataset.listenerAttached = true;
-        btn.addEventListener('click', showRestockForm);
+        btn.addEventListener('click', (e) => {
+            const materialName = e.target.closest('[data-material-name]').dataset.materialName;
+            const material = appState.materials.find(m => m.name === materialName);
+            if (material) {
+                generatePurchaseOrder(material);
+                showToast(`Generated PO for ${material.name}`, 'success');
+            }
+        });
     });
 }
 
@@ -86,12 +102,13 @@ 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'));
         resetModal.addEventListener('click', (e) => {
             const target = e.target.closest('button');
-            if (target && target.id === 'cancel-reset-btn' || e.target.id === 'reset-modal') {
+            if ((target && target.id === 'cancel-reset-btn') || e.target.id === 'reset-modal') {
                 resetModal.classList.add('hidden');
             }
             if (target && target.id === 'confirm-reset-btn') {
@@ -102,12 +119,13 @@ 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'));
         reportsModal.addEventListener('click', (e) => {
             const target = e.target.closest('button');
-            if (target && target.id === 'close-reports-modal-btn' || e.target.id === 'reports-modal') {
+            if ((target && target.id === 'close-reports-modal-btn') || e.target.id === 'reports-modal') {
                 reportsModal.classList.add('hidden');
             }
             if (target && target.id === 'report-prod-summary') renderReport('production');