Update ui.js

ui.js

@@ -1,15 +1,18 @@
-// ui.js - Renders all UI components
+// ui.js - Renders all UI components (Corrected Chart Logic)
 
 import { appState } from './state.js';
 import { attachAllListeners } from './events.js';
 import { getMonthlyProductionSummary, getMonthlyMaterialUsage } from './reportService.js';
 
+// Chart instances to prevent re-creation
 let productionChart = null;
 let inventoryChart = null;
 
+// Set Chart.js defaults for our dark theme
 Chart.defaults.color = 'hsl(210, 14%, 66%)';
 Chart.defaults.borderColor = 'hsl(220, 13%, 30%)';
 
+// Master function to update the entire UI
 export function refreshUI() {
     renderKpiCards();
     renderCharts();
@@ -109,32 +112,39 @@ function renderProductionHistoryChart() {
         data.push(totalProduced);
     }
     
+    // ** BUG FIX STARTS HERE **
+    // Instead of destroying, we now update the existing chart if it exists.
     if (productionChart) {
-        productionChart.destroy();
-    }
-    productionChart = new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: labels,
-            datasets: [{
-                label: 'Complete Units Produced',
-                data: data,
-                backgroundColor: 'rgba(66, 153, 225, 0.5)',
-                borderColor: 'rgba(66, 153, 225, 1)',
-                borderWidth: 1,
-                borderRadius: 4,
-            }]
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: { legend: { display: false } },
-            scales: {
-                y: { beginAtZero: true, grid: { color: 'hsl(220, 13%, 30%)' } },
-                x: { grid: { display: false } }
+        productionChart.data.labels = labels;
+        productionChart.data.datasets[0].data = data;
+        productionChart.update();
+    } else {
+        // If it doesn't exist (first render), create it.
+        productionChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Complete Units Produced',
+                    data: data,
+                    backgroundColor: 'rgba(66, 153, 225, 0.5)',
+                    borderColor: 'rgba(66, 153, 225, 1)',
+                    borderWidth: 1,
+                    borderRadius: 4,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: 'hsl(220, 13%, 30%)' } },
+                    x: { grid: { display: false } }
+                }
             }
-        }
-    });
+        });
+    }
+    // ** BUG FIX ENDS HERE **
 }
 
 function renderInventoryStatusChart() {
@@ -158,18 +168,22 @@ function renderInventoryStatusChart() {
         }]
     };
 
+    // ** BUG FIX STARTS HERE **
     if (inventoryChart) {
-        inventoryChart.destroy();
+        inventoryChart.data.datasets[0].data = [okCount, warningCount, criticalCount];
+        inventoryChart.update();
+    } else {
+        inventoryChart = new Chart(ctx, {
+            type: 'doughnut',
+            data: data,
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
+            }
+        });
     }
-    inventoryChart = new Chart(ctx, {
-        type: 'doughnut',
-        data: data,
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
-        }
-    });
+    // ** BUG FIX ENDS HERE **
 }
 
 function renderModals() {
@@ -191,7 +205,7 @@ export function renderReport(type) {
         headers = ['Material', 'Total Quantity Consumed'];
         rows = Object.entries(data).map(([name, qty]) => {
             const material = appState.materials.find(m => m.name === name);
-            return `<tr><td class="border-b border-border-color px-4 py-2">${name}</td><td class="border-b border-border-color px-4 py-2 text-right">${qty} ${material.unit}</td></tr>`;
+            return `<tr><td class="border-b border-border-color px-4 py-2">${name}</td><td class="border-b border-border-color px-4 py-2 text-right">${qty} ${material?.unit || ''}</td></tr>`;
         }).join('');
     }
     if (Object.keys(data).length === 0) {
@@ -245,7 +259,7 @@ function renderAnalytics() {
         const cost = Object.keys(recipe).reduce((sum, matName) => {
             const material = appState.materials.find(m => m.name === matName);
             const quantity = recipe[matName];
-            return sum + (quantity * (material.costPerUnit || 0));
+            return sum + (quantity * (material?.costPerUnit || 0));
         }, 0);
         productCostsHTML += `<div class="flex justify-between text-sm"><span class="text-secondary">${productName}</span><span class="font-medium">$${cost.toFixed(2)} / unit</span></div>`;
     }
@@ -256,7 +270,7 @@ function renderAnalytics() {
 function renderReorderList() {
     const list = document.getElementById('reorder-list');
     list.innerHTML = '';
-    const itemsToReorder = appState.materials.filter(m => m.currentStock <= (m.reorderPoint || 0));
+    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; }
     itemsToReorder.forEach(item => {
         const needed = item.maxStock - item.currentStock;