Update ui.js

ui.js

@@ -1,18 +1,15 @@
-// ui.js - Renders all UI components (Corrected Chart Logic)
+// ui.js - Renders all UI components
 
 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();
@@ -112,39 +109,32 @@ function renderProductionHistoryChart() {
         data.push(totalProduced);
     }
     
-    // ** BUG FIX STARTS HERE **
-    // Instead of destroying, we now update the existing chart if it exists.
     if (productionChart) {
-        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 } }
-                }
-            }
-        });
+        productionChart.destroy();
     }
-    // ** BUG FIX ENDS HERE **
+    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 } }
+            }
+        }
+    });
 }
 
 function renderInventoryStatusChart() {
@@ -168,22 +158,18 @@ function renderInventoryStatusChart() {
         }]
     };
 
-    // ** BUG FIX STARTS HERE **
     if (inventoryChart) {
-        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.destroy();
     }
-    // ** BUG FIX ENDS HERE **
+    inventoryChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
+        }
+    });
 }
 
 function renderModals() {