Update script.js

script.js

@@ -1,189 +1,191 @@
 window.addEventListener('DOMContentLoaded', () => {
-  const CLP = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', maximumFractionDigits: 0 });
-
-  // Inputs y elementos
-  const input = document.getElementById('invoice-input');
-  const budgetInput = document.getElementById('budget-input');
-  const dropzone = document.getElementById('dropzone');
-  const budgetDropzone = document.getElementById('budget-dropzone');
-  const tbody = document.getElementById('tbody');
-  const budgetTbody = document.getElementById('budget-tbody-right');
-  const total = document.getElementById('total');
-  const errorEl = document.getElementById('error');
-  const budgetError = document.getElementById('budget-error');
-  const processBtn = document.getElementById('process-btn');
-  const resetBtn = document.getElementById('reset-btn');
-  const summary = document.getElementById('summary');
-  const recordsTbody = document.getElementById('records-tbody');
-
-  // Datos
-  const docs = [];
-  const records = [];
-  let budgetFile = null;
-
-  // Funciones auxiliares
-  const fmtDate = iso => new Date(iso).toLocaleString();
-  const randomAmount = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-  const randomFolio = () => 'F' + Math.floor(100000 + Math.random() * 900000);
-
-  const parseCSV = content => {
-    const lines = content.split('\n');
-    for (const line of lines) {
-      const matches = line.match(/(\d{1,3}(?:\.\d{3})*|\d+)/g);
-      if (matches && matches.length > 0) {
-        const amount = parseInt(matches[0].replace(/\./g, ''));
-        if (!isNaN(amount) && amount > 1000) return amount;
-      }
-    }
-    return null;
-  };
-
-  // Renderizar tablas
-  const renderDocs = () => {
-    total.textContent = `${docs.length} en total`;
-    tbody.innerHTML = '';
-    if (!docs.length) {
-      tbody.innerHTML = `<tr><td colspan="5" style="text-align:center;color:var(--muted);padding:24px;">Aún no hay documentos. Sube un PDF o imagen para comenzar.</td></tr>`;
-    } else {
-      docs.forEach((d, i) => {
-        const monto = CLP.format(d.amount);
-        const tr = document.createElement('tr');
-        tr.innerHTML = `<td>${i+1}</td><td>${d.folio}</td><td>${d.name}</td><td>${fmtDate(d.loadedAt)}</td><td>${monto}</td>`;
-        tbody.appendChild(tr);
-      });
-    }
-  };
-
-  const renderBudget = () => {
-    budgetTbody.innerHTML = '';
-    if (!budgetFile) {
-      budgetTbody.innerHTML = `<tr><td colspan="3" style="text-align:center;color:var(--muted);padding:16px;">Aún no se ha cargado el presupuesto.</td></tr>`;
-    } else {
-      const tr = document.createElement('tr');
-      tr.innerHTML = `<td>${budgetFile.name}</td><td>${fmtDate(budgetFile.loadedAt)}</td><td>${CLP.format(budgetFile.amount)}</td>`;
-      budgetTbody.appendChild(tr);
-    }
-  };
-
-  const updateSummary = () => {
-    if (!budgetFile || !docs.length) {
-      summary.innerHTML = '';
-      return;
-    }
-    const totalDocs = docs.reduce((sum, doc) => sum + (doc.amount || 0), 0);
-    const variation = budgetFile.amount - totalDocs;
-    const percentVariation = budgetFile.amount > 0 ? (variation / budgetFile.amount * 100) : 0;
-    summary.innerHTML = `<strong>Total documentos:</strong> ${CLP.format(totalDocs)}<br>
-                         <strong>Presupuesto:</strong> ${CLP.format(budgetFile.amount)}<br>
-                         <strong>Variación:</strong> ${CLP.format(variation)} (${percentVariation.toFixed(1)}%)`;
-  };
-
-  const renderRecords = () => {
-    recordsTbody.innerHTML = '';
-    if (!records.length) {
-      recordsTbody.innerHTML = `<tr><td class="empty" colspan="5">No hay registros todavía. Guarda un proceso para verlo aquí.</td></tr>`;
-    } else {
-      records.forEach((record, i) => {
-        const tr = document.createElement('tr');
-        const variationText = record.diff >= 0 ? `+${CLP.format(record.diff)}` : CLP.format(record.diff);
-        tr.innerHTML = `<td>${record.docsCount}</td><td>${CLP.format(record.docsSum)}</td><td>${CLP.format(record.budget)}</td><td>${variationText}</td>
-                        <td><button class="delete-btn" onclick="deleteRecord(${i})">Eliminar</button></td>`;
-        recordsTbody.appendChild(tr);
-      });
-    }
-  };
-
-  window.deleteRecord = idx => {
-    if (!isNaN(idx) && idx >= 0 && idx < records.length) {
-      records.splice(idx, 1);
-      renderRecords();
-    }
-  };
+    const CLP = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', maximumFractionDigits: 0 });
+
+    // --- Selección de Elementos del DOM ---
+    const invoiceInput = document.getElementById('invoice-input');
+    const budgetInput = document.getElementById('budget-input');
+    const dropzone = document.getElementById('dropzone');
+    const budgetDropzone = document.getElementById('budget-dropzone');
+    const tbody = document.getElementById('tbody');
+    const totalSpan = document.getElementById('total');
+    const errorEl = document.getElementById('error');
+    const budgetErrorEl = document.getElementById('budget-error');
+    const processBtn = document.getElementById('process-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const recordsTbody = document.getElementById('records-tbody');
+    
+    // --- NUEVO: Elementos para resumen y barra de progreso ---
+    const summaryBudgetEl = document.getElementById('summary-budget');
+    const summarySpentEl = document.getElementById('summary-spent');
+    const summaryVariationEl = document.getElementById('summary-variation');
+    const budgetProgressBar = document.getElementById('budget-progress-bar');
+
+    // --- Almacenamiento de Datos en Memoria ---
+    const docs = [];
+    const records = [];
+    let budgetFile = null;
+
+    // --- Funciones de Simulación y Ayuda ---
+    const formatDate = isoString => new Date(isoString).toLocaleDateString('es-CL');
+    const randomAmount = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+    const randomFolio = () => 'F' + Math.floor(100000 + Math.random() * 900000);
+
+    const parseCSVForAmount = content => {
+        const lines = content.split('\n');
+        for (const line of lines) {
+            const matches = line.match(/(\d{1,3}(?:\.\d{3})*|\d+)/g);
+            if (matches && matches.length > 0) {
+                const amount = parseInt(matches[0].replace(/\./g, ''));
+                if (!isNaN(amount) && amount > 1000) return amount;
+            }
+        }
+        return null;
+    };
 
-  // Subir archivos
-  const addFiles = files => {
-    const nowIso = new Date().toISOString();
-    errorEl.textContent = '';
-    Array.from(files).forEach(f => {
-      if (f) {
-        docs.unshift({ name: f.name, loadedAt: nowIso, file: f, amount: randomAmount(10000, 250000), folio: randomFolio() });
-      } else {
-        errorEl.textContent = 'Solo se permiten archivos PDF o imágenes.';
-      }
-    });
-    renderDocs();
-    updateSummary();
-  };
+    // --- Funciones para Actualizar la Interfaz (Render) ---
+    const renderDocs = () => {
+        totalSpan.textContent = `${docs.length} en total`;
+        tbody.innerHTML = '';
+        if (docs.length === 0) {
+            tbody.innerHTML = `<tr><td colspan="5" class="empty">Aún no hay documentos.</td></tr>`;
+        } else {
+            docs.forEach((doc, index) => {
+                const tr = document.createElement('tr');
+                // --- NUEVO: Lógica de previsualización de imágenes ---
+                let documentCell = doc.name;
+                if (doc.file && doc.file.type.startsWith('image/')) {
+                    const imageURL = URL.createObjectURL(doc.file);
+                    documentCell = `<img src="${imageURL}" alt="${doc.name}" class="thumbnail" />`;
+                }
+                tr.innerHTML = `
+                    <td>${index + 1}</td>
+                    <td>${doc.folio}</td>
+                    <td>${documentCell}</td>
+                    <td>${formatDate(doc.loadedAt)}</td>
+                    <td>${CLP.format(doc.amount)}</td>`;
+                tbody.appendChild(tr);
+            });
+        }
+    };
 
-  const setBudgetFromFile = f => {
-    if (!f) return;
-    if (!f.name.toLowerCase().endsWith('.csv')) {
-      budgetError.textContent = 'Solo se permite un archivo CSV.';
-      return;
-    }
-    budgetError.textContent = '';
-    const reader = new FileReader();
-    reader.onload = e => {
-      const content = e.target.result;
-      let amount = parseCSV(content);
-      if (amount === null) amount = randomAmount(200000, 2000000);
-      budgetFile = { name: f.name, loadedAt: new Date().toISOString(), amount };
-      renderBudget();
-      updateSummary();
+    const updateSummary = () => {
+        const totalDocsAmount = docs.reduce((sum, doc) => sum + (doc.amount || 0), 0);
+        const budgetAmount = budgetFile ? budgetFile.amount : 0;
+        const variation = budgetAmount - totalDocsAmount;
+
+        // --- CAMBIO: Actualizar las nuevas tarjetas de resumen ---
+        summaryBudgetEl.textContent = CLP.format(budgetAmount);
+        summarySpentEl.textContent = CLP.format(totalDocsAmount);
+        summaryVariationEl.textContent = CLP.format(variation);
+        
+        // Colores para la variación
+        summaryVariationEl.style.color = variation < 0 ? 'var(--red)' : 'var(--green)';
+
+        // --- NUEVO: Lógica para la barra de progreso ---
+        if (budgetAmount > 0) {
+            const usagePercent = Math.max(0, (totalDocsAmount / budgetAmount) * 100);
+            budgetProgressBar.style.width = `${Math.min(usagePercent, 100)}%`; // No pasar del 100% de ancho
+
+            if (usagePercent > 100) {
+                budgetProgressBar.style.backgroundColor = 'var(--red)';
+            } else if (usagePercent > 80) {
+                budgetProgressBar.style.backgroundColor = 'var(--yellow)';
+            } else {
+                budgetProgressBar.style.backgroundColor = 'var(--green)';
+            }
+        } else {
+            budgetProgressBar.style.width = '0%';
+        }
+    };
+    
+    const renderRecords = () => {
+        recordsTbody.innerHTML = '';
+        if (records.length === 0) {
+            recordsTbody.innerHTML = `<tr><td class="empty" colspan="5">No hay registros todavía.</td></tr>`;
+        } else {
+            records.forEach((record, index) => {
+                const tr = document.createElement('tr');
+                const variationColor = record.diff < 0 ? 'var(--red)' : 'var(--green)';
+                const sign = record.diff >= 0 ? '+' : '';
+                tr.innerHTML = `
+                    <td>${record.docsCount}</td>
+                    <td>${CLP.format(record.docsSum)}</td>
+                    <td>${CLP.format(record.budget)}</td>
+                    <td style="color: ${variationColor}; font-weight: bold;">${sign}${CLP.format(record.diff)}</td>
+                    <td><button class="delete-btn" data-index="${index}">Eliminar</button></td>`;
+                recordsTbody.appendChild(tr);
+            });
+        }
     };
-    reader.readAsText(f);
-  };
 
-  // Eventos
-  input.addEventListener('change', () => { addFiles(input.files); input.value = ''; });
-  budgetInput.addEventListener('change', () => { if (budgetInput.files.length > 0) { setBudgetFromFile(budgetInput.files[0]); budgetInput.value = ''; } });
+    const addInvoiceFiles = files => {
+        errorEl.textContent = '';
+        Array.from(files).forEach(file => {
+            docs.unshift({
+                name: file.name,
+                loadedAt: new Date().toISOString(),
+                file: file,
+                amount: randomAmount(10000, 250000),
+                folio: randomFolio()
+            });
+        });
+        renderDocs();
+        updateSummary();
+    };
 
-  // Drag & drop facturas
-  ['dragenter', 'dragover'].forEach(evt => dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('drag'); }));
-  ['dragleave', 'drop'].forEach(evt => dropzone.addEventListener(evt, e => {
-    e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('drag');
-    if (e.type === 'drop') addFiles(e.dataTransfer.files);
-  }));
+    const setBudgetFile = file => {
+        if (!file || !file.name.toLowerCase().endsWith('.csv')) {
+            budgetErrorEl.textContent = 'Solo se permite un archivo CSV.'; return;
+        }
+        budgetErrorEl.textContent = '';
+        const reader = new FileReader();
+        reader.onload = e => {
+            const content = e.target.result;
+            let amount = parseCSVForAmount(content) || randomAmount(200000, 2000000);
+            budgetFile = { name: file.name, loadedAt: new Date().toISOString(), amount: amount, file: file };
+            updateSummary();
+        };
+        reader.readAsText(file);
+    };
 
-  // Drag & drop presupuesto
-  ['dragenter', 'dragover'].forEach(evt => budgetDropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); budgetDropzone.classList.add('drag'); }));
-  ['dragleave', 'drop'].forEach(evt => budgetDropzone.addEventListener(evt, e => {
-    e.preventDefault(); e.stopPropagation(); budgetDropzone.classList.remove('drag');
-    if (e.type === 'drop' && e.dataTransfer.files.length > 0) setBudgetFromFile(e.dataTransfer.files[0]);
-  }));
+    // --- Asignación de Eventos (sin cambios) ---
+    invoiceInput.addEventListener('change', () => { addInvoiceFiles(invoiceInput.files); invoiceInput.value = ''; });
+    budgetInput.addEventListener('change', () => { if (budgetInput.files.length > 0) setBudgetFile(budgetInput.files[0]); budgetInput.value = ''; });
+    ['dragenter', 'dragover'].forEach(e => dropzone.addEventListener(e, evt => { evt.preventDefault(); evt.stopPropagation(); dropzone.classList.add('drag'); }));
+    ['dragleave', 'drop'].forEach(e => dropzone.addEventListener(e, evt => {
+        evt.preventDefault(); evt.stopPropagation(); dropzone.classList.remove('drag');
+        if (e === 'drop') addInvoiceFiles(evt.dataTransfer.files);
+    }));
+    ['dragenter', 'dragover'].forEach(e => budgetDropzone.addEventListener(e, evt => { evt.preventDefault(); evt.stopPropagation(); budgetDropzone.classList.add('drag'); }));
+    ['dragleave', 'drop'].forEach(e => budgetDropzone.addEventListener(e, evt => {
+        evt.preventDefault(); evt.stopPropagation(); budgetDropzone.classList.remove('drag');
+        if (e === 'drop' && evt.dataTransfer.files.length > 0) setBudgetFile(evt.dataTransfer.files[0]);
+    }));
+    processBtn.addEventListener('click', async () => {
+        if (!budgetFile || docs.length === 0) { alert('Carga un presupuesto y al menos un documento.'); return; }
+        const totalDocs = docs.reduce((sum, d) => sum + d.amount, 0);
+        records.push({ docsCount: docs.length, docsSum: totalDocs, budget: budgetFile.amount, diff: budgetFile.amount - totalDocs });
+        renderRecords();
+    });
+    resetBtn.addEventListener('click', () => {
+        if (confirm('¿Estás seguro? Se borrarán todos los datos de la simulación.')) {
+            docs.length = 0;
+            records.length = 0;
+            budgetFile = null;
+            renderDocs();
+            updateSummary();
+            renderRecords();
+        }
+    });
+    recordsTbody.addEventListener('click', e => {
+        if (e.target.classList.contains('delete-btn')) {
+            const index = parseInt(e.target.dataset.index, 10);
+            if (!isNaN(index)) { records.splice(index, 1); renderRecords(); }
+        }
+    });
 
-  processBtn.addEventListener('click', async () => {
-    if (!budgetFile || !docs.length) {
-      alert('Carga al menos un PDF/imagen y un CSV de presupuesto.');
-      return;
-    }
-    processBtn.textContent = 'Procesando...'; processBtn.disabled = true;
-    await new Promise(r => setTimeout(r, 800));
-    const totalDocs = docs.reduce((sum, d) => sum + d.amount, 0);
-    records.push({ docsCount: docs.length, docsSum: totalDocs, budget: budgetFile.amount, diff: budgetFile.amount - totalDocs });
+    // --- Estado Inicial ---
+    updateSummary();
+    renderDocs();
     renderRecords();
-    processBtn.textContent = 'Procesar'; processBtn.disabled = false;
-  });
-
-  resetBtn.addEventListener('click', () => {
-    if (confirm('¿Estás seguro de que quieres reiniciar todo?')) {
-      docs.length = 0;
-      records.length = 0;
-      budgetFile = null;
-      errorEl.textContent = '';
-      budgetError.textContent = '';
-      input.value = '';
-      budgetInput.value = '';
-      renderDocs();
-      renderBudget();
-      renderRecords();
-      updateSummary();
-      summary.innerHTML = '';
-    }
-  });
-
-  // Inicial
-  renderDocs();
-  renderBudget();
-  renderRecords();
-});
+});