| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Simulación DCDIA - Carga de Documentos</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <header> |
| <h1>Simulación DCDIA - Carga de Boletas y Facturas</h1> |
| <p class="muted">Carga automática de facturas y boletas con formato PDF, JPG o PNG.</p> |
| </header> |
| <main> |
| <div class="grid"> |
| <section class="card"> |
| <h2>💰 Subir presupuesto (CSV)</h2> |
| <p class="muted">Selecciona o arrastra un archivo CSV con el presupuesto.</p> |
| <form id="budget-form" onsubmit="return false;"> |
| <label for="budget-input" class="btn" title="Elegir archivo CSV"> Seleccionar archivo CSV </label> |
| <input id="budget-input" type="file" accept="text/csv,.csv" class="hidden" /> |
| <div id="budget-dropzone" class="dropzone" aria-label="Suelta aquí el CSV">Suelta aquí el CSV</div> |
| <div id="budget-error" class="error" role="alert" aria-live="polite"></div> |
| </form> |
|
|
| <h2 style="margin-top:28px;">📄 Subir factura o boleta</h2> |
| <p class="muted">Selecciona uno o más archivos PDF, JPG o PNG.</p> |
| <form id="upload-form" onsubmit="return false;"> |
| <label for="invoice-input" class="btn" title="Elegir archivo(s) PDF/Imagen"> Seleccionar archivo(s) </label> |
| <input id="invoice-input" type="file" accept="application/pdf,image/*" multiple class="hidden" /> |
| <div id="dropzone" class="dropzone" aria-label="Suelta aquí los archivos">Suelta aquí los archivos</div> |
| <div id="error" class="error" role="alert" aria-live="polite"></div> |
| </form> |
| </section> |
|
|
| <section class="card"> |
| <h2>📊 Resumen Financiero</h2> |
| <div id="summary-cards" class="summary-cards-container"> |
| <div class="summary-card"> |
| <span>Presupuesto Total</span> |
| <strong id="summary-budget">$0</strong> |
| <small id="summary-budget-filename" class="muted" style="margin-top: 4px; font-size: 12px;"></small> |
| </div> |
| <div class="summary-card"> |
| <span>Total Gastado</span> |
| <strong id="summary-spent">$0</strong> |
| </div> |
| <div class="summary-card"> |
| <span>Variación</span> |
| <strong id="summary-variation">$0</strong> |
| </div> |
| </div> |
| |
| <div class="progress-bar-container"> |
| <div id="budget-progress-bar" class="progress-bar"></div> |
| </div> |
|
|
| <div class="hr"></div> |
|
|
| <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;"> |
| <h2>📥 Documentos cargados</h2> |
| <span class="muted" id="total">0 en total</span> |
| </div> |
| <div class="table-wrap"> |
| <table aria-label="Tabla de documentos cargados"> |
| <thead> |
| <tr> |
| <th>#</th> |
| <th>Folio</th> |
| <th>Documento</th> |
| <th>Fecha</th> |
| <th>Monto</th> |
| </tr> |
| </thead> |
| <tbody id="tbody"> |
| <tr> |
| <td colspan="5" style="text-align:center; color:var(--muted); padding:24px;">Aún no hay documentos.</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
|
|
| <div class="actions"> |
| <button id="process-btn" class="process-btn">💾 Guardar Proceso</button> |
| <button id="reset-btn" class="reset-btn">🔄 Reiniciar</button> |
| </div> |
| </section> |
| </div> |
|
|
| <section id="records-section" class="card"> |
| <h2>📑 Registros Guardados</h2> |
| <div class="table-wrap"> |
| <table aria-label="Tabla de registros de procesos"> |
| <thead> |
| <tr> |
| <th>Documentos</th> |
| <th>Monto Total</th> |
| <th>Monto Presupuesto</th> |
| <th>Variación</th> |
| <th>Acciones</th> |
| </tr> |
| </thead> |
| <tbody id="records-tbody"> |
| <tr> |
| <td class="empty" colspan="5">No hay registros todavía.</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </main> |
| <script src="app.js"></script> |
| </body> |
| </html> |
