Update ui.js

ui.js

@@ -4,8 +4,8 @@ import { appState } from './state.js';
 import { attachAllListeners } from './events.js';
 import { getMonthlyProductionSummary, getMonthlyMaterialUsage } from './reportService.js';
 
-// ... (keep all functions from showToast to renderProductionLog the same) ...
-// The only function that needs changing is renderInventory()
+// ... (keep chart variables and all functions from refreshUI down to renderProductionLog) ...
+// We will add one new function and modify renderReorderList.
 
 let productionChart = null;
 let inventoryChart = null;
@@ -19,9 +19,9 @@ export function refreshUI() {
     renderProductInputs();
     renderInventory();
     renderProductionLog();
-    renderModals(); // Still needed to create modal structure initially
+    renderModals(); 
     renderReorderList();
-    attachAllListeners(); // Attaches non-persistent listeners
+    attachAllListeners();
 }
 
 export function showToast(message, type = 'info') {
@@ -131,7 +131,7 @@ function renderProductionHistoryChart() {
             },
             options: {
                 responsive: true,
-                maintainAspectRatio: false, // Important for responsive containers
+                maintainAspectRatio: false,
                 plugins: { legend: { display: false } },
                 scales: {
                     y: { beginAtZero: true, grid: { color: 'hsl(220, 13%, 30%)' } },
@@ -149,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 when getting close to reorder
+        else if (m.currentStock <= m.reorderPoint * 1.5) warningCount++;
         else okCount++;
     });
 
@@ -172,7 +172,7 @@ function renderInventoryStatusChart() {
             data: data,
             options: {
                 responsive: true,
-                maintainAspectRatio: false, // Important for responsive containers
+                maintainAspectRatio: false,
                 plugins: { legend: { position: 'top', labels: { color: 'hsl(210, 14%, 66%)' } } }
             }
         });
@@ -229,7 +229,6 @@ function renderInventory() {
     if (!container) return;
     container.innerHTML = '';
     appState.materials.forEach(material => {
-        // 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);
         
@@ -278,22 +277,62 @@ function renderReorderList() {
     if (!list || !header) return;
     
     list.innerHTML = '';
-    header.querySelector('#generate-full-po-btn')?.remove(); // Remove old button
+    header.querySelector('#open-po-modal-btn')?.remove();
 
-    const itemsToReorder = appState.materials.filter(m => m.currentStock <= m.reorderPoint);
+    const itemsToReorder = appState.materials.filter(m => m.currentStock <= m.reorderPoint * 1.5);
 
     if (itemsToReorder.length === 0) {
         list.innerHTML = `<li class="text-secondary text-center pt-4">All stock levels are healthy.</li>`;
         return;
     }
 
-    // Add the consolidated button
-    const poButton = `<button id="generate-full-po-btn" class="btn btn-secondary text-sm">Generate Full Reorder Report</button>`;
+    const poButton = `<button id="open-po-modal-btn" class="btn btn-secondary text-sm">Create Purchase Order</button>`;
     header.insertAdjacentHTML('beforeend', poButton);
 
     itemsToReorder.forEach(item => {
-        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>`;
+        const needed = Math.max(1, (item.reorderPoint * 2) - item.currentStock);
+        const itemHTML = `<li class="p-3 rounded-md text-sm flex justify-between items-center" style="background-color: ${item.currentStock <= item.reorderPoint ? '#f5656520' : '#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">Suggests ${needed}</span><span class="text-xs text-secondary ml-1">${item.unit}</span></div></li>`;
         list.insertAdjacentHTML('beforeend', itemHTML);
     });
+}
+
+export function renderCustomPOModal(materials) {
+    const modal = document.getElementById('custom-po-modal');
+    if (!modal) return;
+
+    const materialRows = materials.map(material => {
+        const suggestedQty = Math.max(1, (material.reorderPoint * 2) - material.currentStock);
+        return `
+            <div class="po-item-row" data-material-name="${material.name}">
+                <input type="checkbox" class="po-item-select form-checkbox h-5 w-5 rounded bg-dark border-border-color text-accent-blue focus:ring-accent-blue" checked>
+                <div>
+                    <span class="font-semibold">${material.name}</span>
+                    <span class="text-xs text-secondary block">Stock: ${material.currentStock} | Reorder: ${material.reorderPoint}</span>
+                </div>
+                <input type="number" class="po-item-qty input-field w-24 text-right" value="${suggestedQty}" min="0">
+            </div>
+        `;
+    }).join('');
+
+    modal.innerHTML = `
+        <div class="modal-content dashboard-card p-6 max-w-3xl w-full mx-4 flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Create Custom Purchase Order</h3>
+                <button id="cancel-po-btn" class="text-secondary hover:text-primary text-2xl">×</button>
+            </div>
+            <div class="mb-4">
+                <label for="supplier-name" class="block text-sm font-medium text-secondary mb-1">Supplier Name (Optional)</label>
+                <input type="text" id="supplier-name" class="input-field w-full" placeholder="Enter supplier name...">
+            </div>
+            <div id="po-item-list" class="flex-grow overflow-y-auto pr-2" style="max-height: 40vh;">
+                ${materialRows}
+            </div>
+            <div class="flex justify-end space-x-2 mt-6">
+                <button id="cancel-po-btn-footer" class="btn btn-secondary">Cancel</button>
+                <button id="confirm-po-generation-btn" class="btn btn-primary">Generate PO PDF</button>
+            </div>
+        </div>
+    `;
+
+    modal.classList.remove('hidden');
 }