Create ui.js

ui.js

@@ -0,0 +1,116 @@
+// ui.js - Renders all UI components
+
+import { appState } from './state.js';
+import { attachAllListeners } from './events.js';
+
+// Master function to update the entire UI
+export function refreshUI() {
+    renderProductInputs();
+    renderInventory();
+    renderProductionLog();
+    renderAnalytics();
+    renderReorderList();
+    renderDailyProductionSummary();
+    attachAllListeners(); // Re-attach listeners to new/updated elements
+}
+
+export function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-times-circle' : 'fa-info-circle';
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `<i class="fas ${icon}"></i><span>${message}</span>`;
+    container.appendChild(toast);
+    setTimeout(() => toast.classList.add('show'), 10);
+    setTimeout(() => {
+        toast.classList.remove('show');
+        toast.addEventListener('transitionend', () => toast.remove());
+    }, 3000);
+}
+
+// --- Internal Rendering Functions ---
+
+function renderProductInputs() {
+    const container = document.getElementById('product-cards');
+    container.innerHTML = '';
+    for (const productName in appState.productRecipes) {
+        const cardHTML = `<div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="${productName}"><h3 class="font-medium text-gray-700 mb-3">${productName}</h3><div class="flex items-center space-x-3"><input type="number" min="0" class="input-number w-20 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0"><button class="update-btn px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Produce</button></div></div>`;
+        container.insertAdjacentHTML('beforeend', cardHTML);
+    }
+}
+
+function renderInventory() {
+    const container = document.getElementById('material-cards');
+    container.innerHTML = '';
+    appState.materials.forEach(material => {
+        const stockPercentage = (material.currentStock / material.maxStock) * 100;
+        let statusClass = 'status-ok', 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-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 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 class="restock-form mt-2 hidden"></div></div>`;
+        container.insertAdjacentHTML('beforeend', cardHTML);
+    });
+}
+
+function renderProductionLog() {
+    const list = document.getElementById('production-log-list');
+    list.innerHTML = '';
+    if (appState.productionLog.length === 0) { list.innerHTML = `<li class="text-gray-500 text-center pt-4">No production recorded yet.</li>`; return; }
+    [...appState.productionLog].reverse().forEach(entry => {
+        const date = new Date(entry.date);
+        const formattedDate = `${date.toLocaleDateString()} ${date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}`;
+        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);
+    });
+}
+
+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-gray-600">${productName}</span><span class="font-medium">$${cost.toFixed(2)} / unit</span></div>`;
+    }
+    const analyticsHTML = `<div class="p-3 bg-gray-50 rounded-lg"><div class="flex justify-between items-center"><span class="text-gray-600">Total Inventory Value</span><span class="text-lg font-bold text-green-600">$${totalValue.toFixed(2)}</span></div></div><div><h4 class="font-semibold text-sm mb-2 text-gray-700 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 = '';
+    const itemsToReorder = appState.materials.filter(m => m.currentStock <= (m.reorderPoint || 0));
+    if (itemsToReorder.length === 0) { list.innerHTML = `<li class="text-gray-500 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 bg-yellow-50 border border-yellow-200 text-sm" data-material-name="${item.name}"><div class="flex justify-between items-center"><div><span class="font-semibold text-yellow-800">${item.name}</span><span class="text-xs text-yellow-600 block">Stock: ${item.currentStock} / ${item.reorderPoint} (Need ${needed})</span></div><button class="restock-btn-reorder text-xs bg-yellow-400 text-yellow-900 font-bold py-1 px-3 rounded hover:bg-yellow-500">Restock</button></div><div class="restock-form mt-2 hidden"></div></li>`;
+        list.insertAdjacentHTML('beforeend', itemHTML);
+    });
+}
+
+function renderDailyProductionSummary() {
+    const container = document.getElementById('daily-production-summary');
+    container.innerHTML = '';
+    if (appState.productionLog.length === 0) { container.innerHTML = `<p class="text-gray-500 text-center pt-4">No production recorded yet.</p>`; return; }
+    const dailySummary = {};
+    appState.productionLog.forEach(entry => {
+        const date = new Date(entry.date).toLocaleDateString();
+        if (!dailySummary[date]) dailySummary[date] = {};
+        if (!dailySummary[date][entry.productName]) dailySummary[date][entry.productName] = 0;
+        dailySummary[date][entry.productName] += entry.quantity;
+    });
+    const sortedDates = Object.keys(dailySummary).sort((a, b) => new Date(b) - new Date(a));
+    sortedDates.forEach(date => {
+        let dailyEntryHTML = `<div class="p-3 rounded-md bg-blue-50 border border-blue-200 text-sm">`;
+        dailyEntryHTML += `<h5 class="font-semibold text-blue-800 mb-1">${date}</h5>`;
+        for (const productName in dailySummary[date]) { dailyEntryHTML += `<p class="text-gray-700 ml-2">${productName}: <span class="font-bold">${dailySummary[date][productName]} units</span></p>`; }
+        dailyEntryHTML += `</div>`;
+        container.insertAdjacentHTML('beforeend', dailyEntryHTML);
+    });
+}