Update ui.js

ui.js

@@ -1,27 +1,23 @@
-// 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();
     renderProductInputs();
     renderInventory();
     renderProductionLog();
-    renderAnalytics();
-    renderReorderList();
     renderModals();
+    renderReorderList();
     attachAllListeners();
 }
 
@@ -39,13 +35,13 @@ export function showToast(message, type = 'info') {
     }, 3000);
 }
 
-function animateValue(element, start, end, duration, prefix = '') {
+function animateValue(element, start, end, duration, prefix = '', suffix = '') {
     let startTimestamp = null;
     const step = (timestamp) => {
         if (!startTimestamp) startTimestamp = timestamp;
         const progress = Math.min((timestamp - startTimestamp) / duration, 1);
         const current = Math.floor(progress * (end - start) + start);
-        element.textContent = `${prefix}${current.toLocaleString()}`;
+        element.textContent = `${prefix}${current.toLocaleString()}${suffix}`;
         if (progress < 1) {
             window.requestAnimationFrame(step);
         }
@@ -57,7 +53,7 @@ function renderKpiCards() {
     const kpiRow = document.getElementById('kpi-row');
     if (!kpiRow) return;
 
-    const totalValue = appState.materials.reduce((sum, mat) => sum + (mat.currentStock * (mat.costPerUnit || 0)), 0);
+    const totalStockItems = appState.materials.reduce((sum, mat) => sum + mat.currentStock, 0);
     const itemsBelowReorder = appState.materials.filter(m => m.currentStock <= m.reorderPoint).length;
     const oneMonthAgo = new Date(new Date().setMonth(new Date().getMonth() - 1));
     const unitsProducedMonth = appState.productionLog
@@ -65,20 +61,20 @@ function renderKpiCards() {
         .reduce((sum, entry) => sum + entry.quantity, 0);
 
     const kpis = [
-        { id: 'kpi-value', label: 'Total Inventory Value', value: totalValue, prefix: '$', color: 'var(--accent-green)' },
-        { id: 'kpi-units', label: 'Units Produced (Month)', value: unitsProducedMonth, prefix: '', color: 'var(--accent-blue)' },
-        { id: 'kpi-reorder', label: 'Items Below Reorder', value: itemsBelowReorder, prefix: '', color: 'var(--accent-yellow)' },
-        { id: 'kpi-materials', label: 'Materials to Order', value: itemsBelowReorder, prefix: '', color: 'var(--accent-red)' }
+        { id: 'kpi-stock', label: 'Total Stock Items', value: totalStockItems, suffix: ' pcs', color: 'var(--accent-green)' },
+        { id: 'kpi-units', label: 'Units Produced (Month)', value: unitsProducedMonth, suffix: '', color: 'var(--accent-blue)' },
+        { id: 'kpi-reorder', label: 'Items Below Reorder', value: itemsBelowReorder, suffix: '', color: 'var(--accent-yellow)' },
+        { id: 'kpi-materials', label: 'Materials to Order', value: itemsBelowReorder, suffix: '', color: 'var(--accent-red)' }
     ];
 
     kpiRow.innerHTML = kpis.map((kpi, index) => `
         <div class="dashboard-card p-4 flex items-center">
             <div class="kpi-icon-wrapper mr-4" style="background-color: ${kpi.color}20; color: ${kpi.color};">
-                <i class="fas ${['fa-dollar-sign', 'fa-cogs', 'fa-exclamation-triangle', 'fa-shopping-cart'][index]} fa-lg"></i>
+                <i class="fas ${['fa-boxes', 'fa-cogs', 'fa-exclamation-triangle', 'fa-shopping-cart'][index]} fa-lg"></i>
             </div>
             <div>
                 <p class="text-sm text-secondary">${kpi.label}</p>
-                <p class="text-2xl font-bold text-primary" id="${kpi.id}-${index}">${kpi.prefix}0</p>
+                <p class="text-2xl font-bold text-primary" id="${kpi.id}-${index}">0</p>
             </div>
         </div>
     `).join('');
@@ -86,7 +82,7 @@ function renderKpiCards() {
     kpis.forEach((kpi, index) => {
         const element = document.getElementById(`${kpi.id}-${index}`);
         if (element) {
-            animateValue(element, 0, kpi.value, 1500, kpi.prefix);
+            animateValue(element, 0, kpi.value, 1500, kpi.prefix, kpi.suffix);
         }
     });
 }
@@ -112,14 +108,11 @@ function renderProductionHistoryChart() {
         data.push(totalProduced);
     }
     
-    // ** BUG FIX STARTS HERE **
     if (productionChart) {
-        // If chart exists, just update its data and refresh
         productionChart.data.labels = labels;
         productionChart.data.datasets[0].data = data;
         productionChart.update();
     } else {
-        // If chart does not exist (first render), create it
         productionChart = new Chart(ctx, {
             type: 'bar',
             data: {
@@ -134,8 +127,7 @@ function renderProductionHistoryChart() {
                 }]
             },
             options: {
-                responsive: true,
-                maintainAspectRatio: false,
+                responsive: true, maintainAspectRatio: false,
                 plugins: { legend: { display: false } },
                 scales: {
                     y: { beginAtZero: true, grid: { color: 'hsl(220, 13%, 30%)' } },
@@ -144,7 +136,6 @@ function renderProductionHistoryChart() {
             }
         });
     }
-    // ** BUG FIX ENDS HERE **
 }
 
 function renderInventoryStatusChart() {
@@ -168,7 +159,6 @@ function renderInventoryStatusChart() {
         }]
     };
 
-    // ** BUG FIX STARTS HERE **
     if (inventoryChart) {
         inventoryChart.data.datasets[0].data = [okCount, warningCount, criticalCount];
         inventoryChart.update();
@@ -177,13 +167,11 @@ function renderInventoryStatusChart() {
             type: 'doughnut',
             data: data,
             options: {
-                responsive: true,
-                maintainAspectRatio: false,
+                responsive: true, maintainAspectRatio: false,
                 plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
             }
         });
     }
-    // ** BUG FIX ENDS HERE **
 }
 
 function renderModals() {
@@ -249,24 +237,6 @@ function renderProductionLog() {
     });
 }
 
-function renderAnalytics() {
-    const container = document.getElementById('analytics-content');
-    container.innerHTML = '';
-    const totalValue = appState.materials.reduce((sum, mat) => sum + (mat.currentStock * (mat.costPerUnit || 0)), 0);
-    let productCostsHTML = '';
-    for (const productName in appState.productRecipes) {
-        const recipe = appState.productRecipes[productName];
-        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));
-        }, 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>`;
-    }
-    const analyticsHTML = `<div class="p-3 bg-dark rounded-lg"><div class="flex justify-between items-center"><span class="text-secondary">Total Inventory Value</span><span class="text-lg font-bold" style="color: var(--accent-green);">$${totalValue.toFixed(2)}</span></div></div><div><h4 class="font-semibold text-sm mb-2 mt-3">Material Cost Per Product</h4><div class="space-y-1">${productCostsHTML}</div></div>`;
-    container.innerHTML = analyticsHTML;
-}
-
 function renderReorderList() {
     const list = document.getElementById('reorder-list');
     list.innerHTML = '';
@@ -274,7 +244,7 @@ function renderReorderList() {
     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;
-        const itemHTML = `<li class="p-3 rounded-md text-sm" style="background-color: #f6e05e20; border-left: 4px solid var(--accent-yellow);" data-material-name="${item.name}"><div class="flex justify-between items-center"><div><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="restock-btn-reorder btn btn-secondary text-xs">Restock</button></div><div class="restock-form mt-2 hidden"></div></li>`;
+        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>`;
         list.insertAdjacentHTML('beforeend', itemHTML);
     });
 }