Update ui.js

ui.js

@@ -4,6 +4,8 @@ import { appState } from './state.js';
 import { attachAllListeners } from './events.js';
 import { getMonthlyProductionSummary, getMonthlyMaterialUsage } from './reportService.js';
 
+// ... (keep showToast, animateValue, renderKpiCards, renderCharts, renderModals, renderReport, renderProductInputs, renderProductionLog - they are unchanged) ...
+
 let productionChart = null;
 let inventoryChart = null;
 
@@ -146,7 +148,7 @@ function renderInventoryStatusChart() {
     let okCount = 0, warningCount = 0, criticalCount = 0;
     appState.materials.forEach(m => {
         if (m.currentStock <= m.reorderPoint) criticalCount++;
-        else if ((m.currentStock / m.maxStock) <= 0.5) warningCount++;
+        else if (m.currentStock <= m.reorderPoint * 1.5) warningCount++; // Warning if stock is < 150% of reorder point
         else okCount++;
     });
 
@@ -226,11 +228,16 @@ function renderInventory() {
     if (!container) return;
     container.innerHTML = '';
     appState.materials.forEach(material => {
-        const stockPercentage = (material.currentStock / material.maxStock) * 100;
+        // New progress bar logic: "Healthy" is 2x the reorder point.
+        const healthyStockLevel = material.reorderPoint * 2;
+        const stockHealth = Math.min((material.currentStock / healthyStockLevel) * 100, 100);
+
         let statusColor = 'var(--accent-green)';
-        if (stockPercentage <= 50) statusColor = 'var(--accent-yellow)'; 
-        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>`;
+        if (material.currentStock <= material.reorderPoint * 1.5) statusColor = 'var(--accent-yellow)';
+        if (material.currentStock <= material.reorderPoint) statusColor = 'var(--accent-red)';
+        
+        // Removed the MAX display and the edit-max-stock icon
+        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 class="font-semibold">Reorder at: ${material.reorderPoint}</span><i class="fas fa-plus-circle icon-btn restock-icon" title="Restock"></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: ${stockHealth}%; background-color: ${statusColor};"></div></div><div class="restock-form mt-2 hidden"></div></div>`;
         container.insertAdjacentHTML('beforeend', cardHTML);
     });
 }
@@ -268,8 +275,8 @@ function renderReorderList() {
     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;"><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>`;
+        const needed = item.reorderPoint; // Suggested order qty is now the reorder point itself
+        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} / Reorder: ${item.reorderPoint}</span></div><div class="text-right"><span class="font-bold">Order: ${needed}</span><span class="text-xs text-secondary ml-1">${item.unit}</span></div></li>`;
         list.insertAdjacentHTML('beforeend', itemHTML);
     });
 }