Update app.js

app.js

@@ -8,22 +8,12 @@ document.addEventListener('DOMContentLoaded', () => {
             { name: "RG-58 Coaxial Cable", unit: "meters", maxStock: 200, currentStock: 200 },
             { name: "N-Type Connector", unit: "units", maxStock: 1000, currentStock: 1000 },
             { name: "Plastic Insulator", unit: "units", maxStock: 4000, currentStock: 4000 },
-        ]
-    };
-
-    const productRecipes = {
-        "Yagi-Uda Model 5": {
-            "5mm Copper Wire": 10,
-            "RG-58 Coaxial Cable": 5,
-            "N-Type Connector": 1,
-            "Plastic Insulator": 8,
+        ],
+        productRecipes: {
+            "Yagi-Uda Model 5": { "5mm Copper Wire": 10, "RG-58 Coaxial Cable": 5, "N-Type Connector": 1, "Plastic Insulator": 8 },
+            "Basic Dipole Antenna": { "5mm Copper Wire": 5, "RG-58 Coaxial Cable": 2, "N-Type Connector": 1, "Plastic Insulator": 2 }
         },
-        "Basic Dipole Antenna": {
-            "5mm Copper Wire": 5,
-            "RG-58 Coaxial Cable": 2,
-            "N-Type Connector": 1,
-            "Plastic Insulator": 2,
-        }
+        productionLog: [] // NEW: To store history of production
     };
 
     let appState;
@@ -36,41 +26,114 @@ document.addEventListener('DOMContentLoaded', () => {
         const savedState = localStorage.getItem('antennaTrackerState');
         if (savedState) {
             appState = JSON.parse(savedState);
+            // Ensure new properties exist if loading old state
+            if (!appState.productionLog) appState.productionLog = [];
+            if (!appState.productRecipes) appState.productRecipes = initialState.productRecipes;
         } else {
-            // Use a deep copy to avoid modifying the initialState object
             appState = JSON.parse(JSON.stringify(initialState));
         }
     }
 
     // --- UI RENDERING ---
+    
+    /**
+     * NEW: Toast notification system to replace alerts.
+     * @param {string} message The message to display.
+     * @param {string} type 'success', 'error', or 'info'.
+     */
+    function showToast(message, type = 'info') {
+        const container = document.getElementById('toast-container');
+        const toast = document.createElement('div');
+        const icon = type === 'success' ? 'fa-check-circle' : 'fa-times-circle';
+
+        toast.className = `toast toast-${type}`;
+        toast.innerHTML = `<i class="fas ${icon}"></i><span>${message}</span>`;
+        
+        container.appendChild(toast);
+        
+        // Trigger the animation
+        setTimeout(() => toast.classList.add('show'), 10);
 
+        // Remove the toast after 3 seconds
+        setTimeout(() => {
+            toast.classList.remove('show');
+            // Remove the element from DOM after transition ends
+            toast.addEventListener('transitionend', () => toast.remove());
+        }, 3000);
+    }
+
+    /**
+     * REFACTORED: Now generates the material cards from scratch based on state.
+     */
     function renderInventory() {
+        const container = document.getElementById('material-cards');
+        container.innerHTML = ''; // Clear existing cards
+
         appState.materials.forEach(material => {
-            const card = document.querySelector(`.material-card[data-material-name="${material.name}"]`);
-            if (!card) return;
-
-            const currentStockEl = card.querySelector('.current-stock');
-            const progressBarEl = card.querySelector('.progress-bar');
-            
-            currentStockEl.textContent = material.currentStock;
-            
             const stockPercentage = (material.currentStock / material.maxStock) * 100;
-            progressBarEl.style.width = `${stockPercentage}%`;
-
-            // Update status colors
-            card.classList.remove('status-ok', 'status-warning', 'status-critical');
-            progressBarEl.classList.remove('progress-ok', 'progress-warning', 'progress-critical');
-
-            if (stockPercentage > 50) {
-                card.classList.add('status-ok');
-                progressBarEl.classList.add('progress-ok');
-            } else if (stockPercentage > 20) {
-                card.classList.add('status-warning');
-                progressBarEl.classList.add('progress-warning');
-            } else {
-                card.classList.add('status-critical');
-                progressBarEl.classList.add('progress-critical');
+            let statusClass = 'status-ok';
+            let progressClass = 'progress-ok';
+
+            if (stockPercentage <= 50 && stockPercentage > 20) {
+                statusClass = 'status-warning';
+                progressClass = 'progress-warning';
+            } else if (stockPercentage <= 20) {
+                statusClass = 'status-critical';
+                progressClass = 'progress-critical';
             }
+
+            const cardHTML = `
+                <div class="material-card bg-white rounded-lg shadow p-4 border-l-4 ${statusClass}" data-material-name="${material.name}">
+                    <div class="flex justify-between items-start mb-1">
+                        <h3 class="font-medium text-gray-700">${material.name}</h3>
+                        <div class="text-xs text-gray-500 flex items-center gap-2">
+                            <span>MAX:</span>
+                            <span class="font-semibold max-stock-value">${material.maxStock}</span>
+                            <i class="fas fa-pencil-alt text-gray-400 hover:text-blue-500 cursor-pointer edit-max-stock"></i>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-baseline mb-2">
+                        <div class="text-2xl font-bold current-stock">${material.currentStock}</div>
+                        <span class="text-sm text-gray-500 unit">${material.unit}</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div class="h-2.5 rounded-full ${progressClass} progress-bar" style="width: ${stockPercentage}%"></div>
+                    </div>
+                </div>
+            `;
+            container.insertAdjacentHTML('beforeend', cardHTML);
+        });
+        
+        // Re-attach event listeners for editing max stock after re-rendering
+        attachMaxStockEditListeners();
+    }
+    
+    /**
+     * NEW: Renders the production log list.
+     */
+    function renderProductionLog() {
+        const list = document.getElementById('production-log-list');
+        list.innerHTML = ''; // Clear the list
+
+        if (appState.productionLog.length === 0) {
+            list.innerHTML = `<li class="text-gray-500 text-center pt-4">No production recorded yet.</li>`;
+            return;
+        }
+
+        // Show most recent entries first
+        [...appState.productionLog].reverse().forEach(entry => {
+            const date = new Date(entry.date);
+            const formattedDate = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+            const logHTML = `
+                <li class="p-2 border-b border-gray-100 flex justify-between items-center text-sm">
+                    <div>
+                        <span class="font-semibold text-blue-600">${entry.quantity}x</span>
+                        <span class="text-gray-800">${entry.productName}</span>
+                    </div>
+                    <span class="text-xs text-gray-400">${formattedDate}</span>
+                </li>
+            `;
+            list.insertAdjacentHTML('beforeend', logHTML);
         });
     }
 
@@ -79,13 +142,12 @@ document.addEventListener('DOMContentLoaded', () => {
     function handleUpdateStock(productName, quantity) {
         if (quantity <= 0) return;
 
-        const recipe = productRecipes[productName];
+        const recipe = appState.productRecipes[productName];
         if (!recipe) {
-            alert(`Error: No recipe found for ${productName}.`);
+            showToast(`Error: No recipe found for ${productName}.`, 'error');
             return;
         }
 
-        // 1. Check if there are enough materials
         let canProduce = true;
         let missingMaterials = [];
         for (const materialName in recipe) {
@@ -93,42 +155,82 @@ document.addEventListener('DOMContentLoaded', () => {
             const material = appState.materials.find(m => m.name === materialName);
             if (!material || material.currentStock < required) {
                 canProduce = false;
-                missingMaterials.push(`${required} ${material.unit} of ${materialName} (have ${material.currentStock})`);
+                missingMaterials.push(`${materialName}: need ${required}, have ${material.currentStock}`);
             }
         }
 
-        // 2. If not enough, show an alert
         if (!canProduce) {
-            alert(`Insufficient materials to produce ${quantity} of ${productName}.\n\nNeeded:\n- ${missingMaterials.join('\n- ')}`);
+            showToast(`Insufficient materials for ${quantity}x ${productName}.`, 'error');
             return;
         }
 
-        // 3. If enough, deduct materials
         for (const materialName in recipe) {
             const required = recipe[materialName] * quantity;
             const material = appState.materials.find(m => m.name === materialName);
             material.currentStock -= required;
         }
+        
+        // NEW: Log the production
+        appState.productionLog.push({
+            productName: productName,
+            quantity: quantity,
+            date: new Date().toISOString()
+        });
 
-        // 4. Save state and re-render
         saveState();
         renderInventory();
+        renderProductionLog();
+        showToast(`Produced ${quantity}x ${productName}.`, 'success');
         
-        // 5. Clear the input field for this product
         const productCard = document.querySelector(`.product-card[data-product-name="${productName}"]`);
-        if(productCard) {
-            productCard.querySelector('input').value = '0';
-        }
+        if(productCard) productCard.querySelector('input').value = '0';
     }
-    
-    function handleResetData() {
-        if (confirm('Are you sure you want to reset all inventory data? This action cannot be undone.')) {
-            localStorage.removeItem('antennaTrackerState');
-            init(); // Re-initialize the application
-        }
+
+    /**
+     * NEW: Logic for inline editing of max stock values.
+     */
+    function attachMaxStockEditListeners() {
+        document.querySelectorAll('.edit-max-stock').forEach(icon => {
+            icon.addEventListener('click', (e) => {
+                const valueSpan = e.target.previousElementSibling;
+                const materialName = e.target.closest('.material-card').dataset.materialName;
+                const material = appState.materials.find(m => m.name === materialName);
+
+                // Create an input field
+                const input = document.createElement('input');
+                input.type = 'number';
+                input.value = material.maxStock;
+                input.className = 'w-20 text-right font-semibold border rounded px-1';
+
+                // Replace span with input
+                valueSpan.replaceWith(input);
+                input.focus();
+                input.select();
+
+                // Save on blur (clicking away)
+                input.addEventListener('blur', () => {
+                    const newValue = parseInt(input.value, 10);
+                    if (!isNaN(newValue) && newValue >= material.currentStock) {
+                        material.maxStock = newValue;
+                        saveState();
+                        renderInventory(); // Re-render to update everything
+                    } else {
+                        showToast('Max stock must be a number and greater than current stock.', 'error');
+                        input.replaceWith(valueSpan); // Revert on invalid input
+                    }
+                });
+                
+                // Save on Enter key
+                input.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter') {
+                        input.blur();
+                    }
+                });
+            });
+        });
     }
-    
-    // Modal logic
+
+    // --- MODAL & RESET LOGIC ---
     const resetModal = document.getElementById('reset-modal');
     const showResetModalBtn = document.getElementById('show-reset-modal-btn');
     const cancelResetBtn = document.getElementById('cancel-reset-btn');
@@ -140,25 +242,20 @@ document.addEventListener('DOMContentLoaded', () => {
         localStorage.removeItem('antennaTrackerState');
         init();
         resetModal.classList.add('hidden');
+        showToast('Application data has been reset.', 'info');
     });
 
-
     // --- INITIALIZATION ---
-
     function init() {
         loadState();
         renderInventory();
+        renderProductionLog();
 
-        // Attach event listeners to all "Update Stock" buttons
         document.querySelectorAll('.product-card').forEach(card => {
             const updateBtn = card.querySelector('.update-btn');
             const input = card.querySelector('input');
             const productName = card.dataset.productName;
-
-            updateBtn.addEventListener('click', () => {
-                const quantity = parseInt(input.value, 10);
-                handleUpdateStock(productName, quantity);
-            });
+            updateBtn.addEventListener('click', () => handleUpdateStock(productName, parseInt(input.value, 10)));
         });
     }