Update ui.js

ui.js

@@ -4,7 +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) ...
+// ... (keep all functions from showToast to renderProductionLog the same) ...
+// The only function that needs changing is renderInventory()
 
 let productionChart = null;
 let inventoryChart = null;
@@ -148,7 +149,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.reorderPoint * 1.5) warningCount++; // Warning if stock is < 150% of reorder point
+        else if (m.currentStock <= m.reorderPoint * 1.5) warningCount++; // Warning when getting close to reorder
         else okCount++;
     });
 
@@ -228,16 +229,32 @@ function renderInventory() {
     if (!container) return;
     container.innerHTML = '';
     appState.materials.forEach(material => {
-        // New progress bar logic: "Healthy" is 2x the reorder point.
-        const healthyStockLevel = material.reorderPoint * 2;
-        const stockHealth = Math.min((material.currentStock / healthyStockLevel) * 100, 100);
-
+        // The bar is "full" at 2x the reorder point. Capped at 100%.
+        const safeStockLevel = material.reorderPoint * 2;
+        const stockPercentage = Math.min((material.currentStock / safeStockLevel) * 100, 100);
+        
         let statusColor = 'var(--accent-green)';
-        if (material.currentStock <= material.reorderPoint * 1.5) statusColor = 'var(--accent-yellow)';
+        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>`;
+        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">
+                        <i class="fas fa-plus-circle icon-btn restock-icon" title="Restock"></i>
+                        <i class="fas fa-edit icon-btn edit-current-stock" title="Set Current Stock"></i>
+                    </div>
+                </div>
+                <div class="flex justify-between items-baseline mb-2">
+                    <div class="text-2xl font-bold current-stock-value">${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);
     });
 }
@@ -275,8 +292,8 @@ function renderReorderList() {
     header.insertAdjacentHTML('beforeend', poButton);
 
     itemsToReorder.forEach(item => {
-        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>`;
+        const needed = (item.reorderPoint * 2) - 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} / Reorder at: ${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);
     });
 }