Update ui.js

ui.js

@@ -16,9 +16,9 @@ export function refreshUI() {
     renderProductInputs();
     renderInventory();
     renderProductionLog();
-    renderModals();
+    renderModals(); // Still needed to create modal structure initially
     renderReorderList();
-    attachAllListeners();
+    attachAllListeners(); // Attaches non-persistent listeners
 }
 
 export function showToast(message, type = 'info') {
@@ -127,7 +127,8 @@ function renderProductionHistoryChart() {
                 }]
             },
             options: {
-                responsive: true, maintainAspectRatio: false,
+                responsive: true,
+                maintainAspectRatio: false, // Important for responsive containers
                 plugins: { legend: { display: false } },
                 scales: {
                     y: { beginAtZero: true, grid: { color: 'hsl(220, 13%, 30%)' } },
@@ -167,7 +168,8 @@ function renderInventoryStatusChart() {
             type: 'doughnut',
             data: data,
             options: {
-                responsive: true, maintainAspectRatio: false,
+                responsive: true,
+                maintainAspectRatio: false, // Important for responsive containers
                 plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
             }
         });
@@ -175,8 +177,14 @@ function renderInventoryStatusChart() {
 }
 
 function renderModals() {
-    document.getElementById('reset-modal').innerHTML = `<div class="modal-content dashboard-card p-6 max-w-sm w-full mx-4"><h3 class="text-lg font-semibold mb-2">Confirm Reset</h3><p class="text-secondary mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p><div class="flex justify-end space-x-2"><button id="cancel-reset-btn" class="btn btn-secondary">Cancel</button><button id="confirm-reset-btn" class="btn btn-danger">Reset Data</button></div></div>`;
-    document.getElementById('reports-modal').innerHTML = `<div class="modal-content dashboard-card p-6 max-w-2xl w-full mx-4"><div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold">Generate Report</h3><button id="close-reports-modal-btn" class="text-secondary hover:text-primary text-2xl">×</button></div><div class="flex gap-4 mb-4"><button id="report-prod-summary" class="flex-1 btn btn-primary">Monthly Production</button><button id="report-mat-usage" class="flex-1 btn btn-primary" style="background-color: var(--accent-green);">Monthly Material Usage</button></div><div id="report-content" class="p-4 border border-border-color rounded bg-dark min-h-[300px]">Select a report to view data.</div></div>`;
+    const resetModal = document.getElementById('reset-modal');
+    if (resetModal && resetModal.innerHTML === '') {
+        resetModal.innerHTML = `<div class="modal-content dashboard-card p-6 max-w-sm w-full mx-4"><h3 class="text-lg font-semibold mb-2">Confirm Reset</h3><p class="text-secondary mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p><div class="flex justify-end space-x-2"><button id="cancel-reset-btn" class="btn btn-secondary">Cancel</button><button id="confirm-reset-btn" class="btn btn-danger">Reset Data</button></div></div>`;
+    }
+    const reportsModal = document.getElementById('reports-modal');
+    if (reportsModal && reportsModal.innerHTML === '') {
+        reportsModal.innerHTML = `<div class="modal-content dashboard-card p-6 max-w-2xl w-full mx-4"><div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold">Generate Report</h3><button id="close-reports-modal-btn" class="text-secondary hover:text-primary text-2xl">×</button></div><div class="flex gap-4 mb-4"><button id="report-prod-summary" class="flex-1 btn btn-primary">Monthly Production</button><button id="report-mat-usage" class="flex-1 btn btn-primary" style="background-color: var(--accent-green);">Monthly Material Usage</button></div><div id="report-content" class="p-4 border border-border-color rounded bg-dark min-h-[300px]">Select a report to view data.</div></div>`;
+    }
 }
 
 export function renderReport(type) {
@@ -205,6 +213,7 @@ export function renderReport(type) {
 
 function renderProductInputs() {
     const container = document.getElementById('product-cards');
+    if (!container) return;
     container.innerHTML = '';
     for (const productName in appState.productRecipes) {
         const cardHTML = `<div class="dashboard-card p-4 border-l-4 border-l-transparent"><h3 class="font-medium mb-3">${productName}</h3><div class="flex items-center space-x-3"><input type="number" min="0" class="input-field w-20" value="0"><button class="btn btn-primary flex-1 update-btn" data-product-name="${productName}">Produce</button></div></div>`;
@@ -214,12 +223,13 @@ function renderProductInputs() {
 
 function renderInventory() {
     const container = document.getElementById('material-cards');
+    if (!container) return;
     container.innerHTML = '';
     appState.materials.forEach(material => {
         const stockPercentage = (material.currentStock / material.maxStock) * 100;
         let statusColor = 'var(--accent-green)';
         if (stockPercentage <= 50) statusColor = 'var(--accent-yellow)'; 
-        if (stockPercentage <= 20) statusColor = 'var(--accent-red)';
+        if (material.currentStock <= material.reorderPoint) statusColor = 'var(--accent-red)'; // Changed logic to use reorder point for red
         const cardHTML = `<div class="dashboard-card p-4 border-l-4" style="border-left-color: ${statusColor}" data-material-name="${material.name}"><div class="flex justify-between items-start mb-1"><h3 class="font-medium text-sm">${material.name}</h3><div class="text-xs text-secondary flex items-center gap-3"><span>MAX:</span><span class="font-semibold max-stock-value">${material.maxStock}</span><i class="fas fa-plus-circle icon-btn restock-icon" title="Restock"></i><i class="fas fa-pencil-alt icon-btn edit-max-stock" title="Edit Max Stock"></i></div></div><div class="flex justify-between items-baseline mb-2"><div class="text-2xl font-bold">${material.currentStock}</div><span class="text-sm text-secondary">${material.unit}</span></div><div class="w-full bg-dark rounded-full h-1.5"><div class="h-1.5 rounded-full" style="width: ${stockPercentage}%; background-color: ${statusColor};"></div></div><div class="restock-form mt-2 hidden"></div></div>`;
         container.insertAdjacentHTML('beforeend', cardHTML);
     });
@@ -227,6 +237,7 @@ function renderInventory() {
 
 function renderProductionLog() {
     const list = document.getElementById('production-log-list');
+    if (!list) return;
     list.innerHTML = '';
     if (appState.productionLog.length === 0) { list.innerHTML = `<li class="text-secondary text-center pt-4">No production recorded yet.</li>`; return; }
     [...appState.productionLog].reverse().forEach(entry => {
@@ -239,12 +250,26 @@ function renderProductionLog() {
 
 function renderReorderList() {
     const list = document.getElementById('reorder-list');
+    const header = document.getElementById('reorder-header');
+    if (!list || !header) return;
+    
     list.innerHTML = '';
+    header.querySelector('#generate-full-po-btn')?.remove(); // Remove old button
+
     const itemsToReorder = appState.materials.filter(m => m.currentStock <= m.reorderPoint);
-    if (itemsToReorder.length === 0) { list.innerHTML = `<li class="text-secondary text-center pt-4">All stock levels are healthy.</li>`; return; }
+
+    if (itemsToReorder.length === 0) {
+        list.innerHTML = `<li class="text-secondary text-center pt-4">All stock levels are healthy.</li>`;
+        return;
+    }
+
+    // Add the consolidated button
+    const poButton = `<button id="generate-full-po-btn" class="btn btn-secondary text-sm">Generate Full Reorder Report</button>`;
+    header.insertAdjacentHTML('beforeend', poButton);
+
     itemsToReorder.forEach(item => {
         const needed = item.maxStock - item.currentStock;
-        const itemHTML = `<li class="p-3 rounded-md text-sm flex justify-between items-center" style="background-color: #f6e05e20;" data-material-name="${item.name}"><div class="flex-grow"><span class="font-semibold">${item.name}</span><span class="text-xs text-secondary block">Stock: ${item.currentStock} / ${item.reorderPoint} (Need ${needed})</span></div><button class="generate-po-btn btn btn-secondary text-xs">Generate PO</button></li>`;
+        const itemHTML = `<li class="p-3 rounded-md text-sm flex justify-between items-center" style="background-color: #f6e05e20;"><div class="flex-grow"><span class="font-semibold">${item.name}</span><span class="text-xs text-secondary block">Stock: ${item.currentStock} / ${item.reorderPoint} (Need ${needed})</span></div><div class="text-right"><span class="font-bold">${needed}</span><span class="text-xs text-secondary ml-1">${item.unit}</span></div></li>`;
         list.insertAdjacentHTML('beforeend', itemHTML);
     });
 }