Update ui.js

ui.js

@@ -2,6 +2,7 @@
 
 import { appState } from './state.js';
 import { attachAllListeners } from './events.js';
+import { getMonthlyProductionSummary, getMonthlyMaterialUsage } from './reportService.js';
 
 // Chart instances to prevent re-creation
 let productionChart = null;
@@ -16,14 +17,25 @@ export function refreshUI() {
     renderProductionLog();
     renderAnalytics();
     renderReorderList();
-    // No longer need renderDailyProductionSummary as charts are better
-    attachAllListeners();
+    renderModals();
+    attachAllListeners(); // Re-attach listeners to new/updated elements
 }
 
-// ... showToast function remains the same ...
-export function showToast(message, type = 'info') { /* ... same as before ... */ }
+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);
+}
 
-// --- NEW Dashboard Rendering Functions ---
+// --- Dashboard Rendering Functions ---
 
 function renderKpiCards() {
     const kpiRow = document.getElementById('kpi-row');
@@ -157,12 +169,103 @@ function renderInventoryStatusChart() {
     }
 }
 
+function renderModals() {
+    const resetModalContainer = document.getElementById('reset-modal');
+    resetModalContainer.innerHTML = `<div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl"><h3 class="text-lg font-semibold mb-2">Confirm Reset</h3><p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p><div class="flex justify-end space-x-2"><button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button><button id="confirm-reset-btn" class="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600">Reset Data</button></div></div>`;
+
+    const reportsModalContainer = document.getElementById('reports-modal');
+    reportsModalContainer.innerHTML = `<div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 shadow-xl"><div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold">Generate Report</h3><button id="close-reports-modal-btn" class="text-gray-500 hover:text-gray-800">×</button></div><div class="flex gap-4 mb-4"><button id="report-prod-summary" class="flex-1 px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">Monthly Production</button><button id="report-mat-usage" class="flex-1 px-4 py-2 text-sm bg-green-500 text-white rounded hover:bg-green-600">Monthly Material Usage</button></div><div id="report-content" class="p-4 border rounded bg-gray-50 min-h-[300px]">Select a report to view data.</div></div>`;
+}
 
-// --- Internal Rendering Functions (Unchanged or minor tweaks) ---
+export function renderReport(type) {
+    const content = document.getElementById('report-content');
+    let data, title, headers, rows;
 
-function renderProductInputs() { /* ... same as before ... */ }
-function renderInventory() { /* ... same as before ... */ }
-function renderProductionLog() { /* ... same as before ... */ }
-function renderAnalytics() { /* ... same as before ... */ }
-function renderReorderList() { /* ... same as before ... */ }
-// We are removing renderDailyProductionSummary as the charts provide better visualization
+    if (type === 'production') {
+        data = getMonthlyProductionSummary();
+        title = 'Monthly Production Summary (Last 30 Days)';
+        headers = ['Product/Assembly', 'Total Units Produced'];
+        rows = Object.entries(data).map(([name, qty]) => `<tr><td class="border px-4 py-2">${name}</td><td class="border px-4 py-2 text-right">${qty}</td></tr>`).join('');
+    } else {
+        data = getMonthlyMaterialUsage();
+        title = 'Monthly Material Usage (Last 30 Days)';
+        headers = ['Material', 'Total Quantity Consumed'];
+        rows = Object.entries(data).map(([name, qty]) => {
+            const material = appState.materials.find(m => m.name === name);
+            return `<tr><td class="border px-4 py-2">${name}</td><td class="border px-4 py-2 text-right">${qty} ${material.unit}</td></tr>`;
+        }).join('');
+    }
+
+    if (Object.keys(data).length === 0) {
+        content.innerHTML = `<p class="text-center text-gray-500 pt-12">No data available for this period.</p>`;
+        return;
+    }
+
+    content.innerHTML = `<h4 class="font-bold mb-2">${title}</h4><table class="table-auto w-full text-sm"><thead><tr><th class="border px-4 py-2 text-left">${headers[0]}</th><th class="border px-4 py-2 text-right">${headers[1]}</th></tr></thead><tbody>${rows}</tbody></table>`;
+}
+
+// --- 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);
+    });
+}