| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sistema de Pendientes de Pago</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| color: #1e293b; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .card { | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .tab-content { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .table-container { | |
| max-height: 500px; | |
| scrollbar-width: thin; | |
| scrollbar-color: #cbd5e1 #f1f5f9; | |
| } | |
| .table-container::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .table-container::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| .table-container::-webkit-scrollbar-thumb { | |
| background-color: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| .badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| } | |
| .action-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .action-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .floating-btn { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .floating-btn:hover { | |
| box-shadow: 0 6px 8px rgba(0,0,0,0.15); | |
| transform: translateY(-2px); | |
| } | |
| .no-records { | |
| background-image: linear-gradient(to right, #f8fafc, #f1f5f9, #f8fafc); | |
| background-size: 200% auto; | |
| animation: shimmer 1.5s infinite linear; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Contenedor principal --> | |
| <div class="flex h-screen bg-gray-50" id="app"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-wallet text-2xl text-blue-600 mr-3"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Pendientes de Pago</h1> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <nav class="p-4 space-y-1"> | |
| <a href="#" class="tab-link flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-blue-50 text-blue-700" data-tab="dashboard"> | |
| <i class="fas fa-tachometer-alt mr-3 text-blue-600"></i> Dashboard | |
| </a> | |
| <a href="#" class="tab-link flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100" data-tab="pendientes"> | |
| <i class="fas fa-list-ul mr-3 text-gray-500"></i> Pendientes | |
| </a> | |
| <a href="#" class="tab-link flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100" data-tab="historial"> | |
| <i class="fas fa-history mr-3 text-gray-500"></i> Historial | |
| </a> | |
| <a href="#" class="tab-link flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100" data-tab="reportes"> | |
| <i class="fas fa-chart-bar mr-3 text-gray-500"></i> Reportes | |
| </a> | |
| <a href="#" class="tab-link flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100" data-tab="configuracion"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> Configuraci贸n | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button onclick="logout()" class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Cerrar Sesi贸n | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Contenido principal --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-6"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800" id="current-tab-title">Dashboard</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span id="current-date" class="text-sm text-gray-500"></span> | |
| <div class="relative"> | |
| <button id="notifications-btn" class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-500"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contenido de las pesta帽as --> | |
| <div class="tab-content" id="dashboard-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Pendiente</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1" id="total-pendiente">$0.00</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-xs text-gray-500">脷ltima actualizaci贸n: <span id="last-update">hoy</span></p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Pagado</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1" id="total-pagado">$0.00</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-xs text-gray-500">Este mes: <span id="month-pagado">$0.00</span></p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Registros Pendientes</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1" id="count-pendientes">0</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-file-invoice text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-xs text-gray-500">Vencidos: <span id="count-vencidos">0</span></p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Registros Historial</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1" id="count-historial">0</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-archive text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-xs text-gray-500">Este mes: <span id="month-historial">0</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Evoluci贸n de Pagos</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200" data-period="week">Semana</button> | |
| <button class="text-xs px-2 py-1 bg-blue-100 rounded hover:bg-blue-200" data-period="month">Mes</button> | |
| <button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200" data-period="year">A帽o</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="payments-chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Distribuci贸n por Categor铆a</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200" data-type="pendientes">Pendientes</button> | |
| <button class="text-xs px-2 py-1 bg-blue-100 rounded hover:bg-blue-200" data-type="historial">Historial</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="categories-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Pr贸ximos Vencimientos</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="activarTab('pendientes')">Ver todos</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripci贸n</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="upcoming-payments"> | |
| <tr> | |
| <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">Cargando...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pesta帽a Pendientes --> | |
| <div class="tab-content hidden" id="pendientes-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Nuevo Registro</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="fecha" class="block text-sm font-medium text-gray-700 mb-1">Fecha</label> | |
| <input type="date" id="fecha" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <div> | |
| <label for="nombre" class="block text-sm font-medium text-gray-700 mb-1">Nombre</label> | |
| <input type="text" id="nombre" placeholder="Ingrese nombre" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="descripcion" class="block text-sm font-medium text-gray-700 mb-1">Descripci贸n</label> | |
| <textarea id="descripcion" placeholder="Ingrese descripci贸n" required rows="3" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"></textarea> | |
| </div> | |
| <div> | |
| <label for="total" class="block text-sm font-medium text-gray-700 mb-1">Total</label> | |
| <input type="number" id="total" placeholder="0.00" step="0.01" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="btn-agregar" | |
| class="bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Agregar | |
| </button> | |
| <button id="btn-cancelar-edicion" | |
| class="ml-2 bg-gray-200 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-300 transition hidden"> | |
| Cancelar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Resumen</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Pendiente</p> | |
| <h3 class="text-2xl font-bold text-gray-800" id="pendientes-summary-total">$0.00</h3> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Registros</p> | |
| <h3 class="text-xl font-bold text-gray-800" id="pendientes-summary-count">0</h3> | |
| </div> | |
| <div class="pt-4 border-t border-gray-100"> | |
| <label for="buscar" class="block text-sm font-medium text-gray-700 mb-2">Buscar registros</label> | |
| <div class="relative"> | |
| <input type="search" id="buscar" placeholder="Buscar por nombre, fecha o descripci贸n" | |
| class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-100"> | |
| <button id="exportar-json" | |
| class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-export mr-2"></i> Exportar JSON | |
| </button> | |
| <button id="exportar-excel" | |
| class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-excel mr-2"></i> Exportar CSV | |
| </button> | |
| <button id="importar-json" | |
| class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-import mr-2"></i> Importar JSON | |
| </button> | |
| <button id="importar-excel" | |
| class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-file-csv mr-2"></i> Importar CSV | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Registros Pendientes</h3> | |
| <div class="flex space-x-2"> | |
| <button id="descargar-busqueda" | |
| class="bg-gray-100 text-gray-700 py-1.5 px-3 rounded-lg hover:bg-gray-200 transition flex items-center text-sm"> | |
| <i class="fas fa-image mr-1"></i> Imagen | |
| </button> | |
| <button id="limpiar-datos" | |
| class="bg-red-100 text-red-700 py-1.5 px-3 rounded-lg hover:bg-red-200 transition flex items-center text-sm"> | |
| <i class="fas fa-trash mr-1"></i> Limpiar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="table-container overflow-auto rounded-lg border border-gray-200"> | |
| <table class="min-w-full divide-y divide-gray-200" id="tabla-pendientes"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripci贸n</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="pendientes-body"> | |
| <tr> | |
| <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">Cargando datos...</td> | |
| </tr> | |
| </tbody> | |
| <tfoot class="bg-gray-50"> | |
| <tr> | |
| <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-500">TOTAL PENDIENTE:</td> | |
| <td class="px-6 py-3 text-left text-sm font-medium text-gray-900" id="suma-total">$0.00</td> | |
| <td></td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pesta帽a Historial --> | |
| <div class="tab-content hidden" id="historial-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Filtros</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="fecha-inicio" class="block text-sm font-medium text-gray-700 mb-1">Fecha Inicio</label> | |
| <input type="date" id="fecha-inicio" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <div> | |
| <label for="fecha-fin" class="block text-sm font-medium text-gray-700 mb-1">Fecha Fin</label> | |
| <input type="date" id="fecha-fin" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <div> | |
| <label for="buscar-historial" class="block text-sm font-medium text-gray-700 mb-1">Buscar</label> | |
| <div class="relative"> | |
| <input type="search" id="buscar-historial" placeholder="Buscar en historial" | |
| class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Resumen</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Pagado</p> | |
| <h3 class="text-2xl font-bold text-gray-800" id="historial-summary-total">$0.00</h3> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Registros</p> | |
| <h3 class="text-xl font-bold text-gray-800" id="historial-summary-count">0</h3> | |
| </div> | |
| <div class="pt-4 border-t border-gray-100"> | |
| <button id="exportar-historial-json" | |
| class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-export mr-2"></i> Exportar JSON | |
| </button> | |
| <button id="exportar-historial-excel" | |
| class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition flex items-center justify-center"> | |
| <i class="fas fa-file-excel mr-2"></i> Exportar CSV | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Historial de Pagos</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500" id="historial-filter-info">Mostrando todos los registros</span> | |
| </div> | |
| </div> | |
| <div class="table-container overflow-auto rounded-lg border border-gray-200"> | |
| <table class="min-w-full divide-y divide-gray-200" id="tabla-historial"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha Pago</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha Registro</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descripci贸n</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="historial-body"> | |
| <tr> | |
| <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">Cargando historial...</td> | |
| </tr> | |
| </tbody> | |
| <tfoot class="bg-gray-50"> | |
| <tr> | |
| <td colspan="4" class="px-6 py-3 text-right text-sm font-medium text-gray-500">TOTAL PAGADO:</td> | |
| <td class="px-6 py-3 text-left text-sm font-medium text-gray-900" id="suma-total-historial">$0.00</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pesta帽a Reportes --> | |
| <div class="tab-content hidden" id="reportes-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Pagos por Mes</h3> | |
| <select id="report-year" class="text-sm border border-gray-300 rounded px-3 py-1 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="2023">2023</option> | |
| <option value="2024" selected>2024</option> | |
| </select> | |
| </div> | |
| <div class="h-80"> | |
| <canvas id="monthly-payments-chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Top Clientes</h3> | |
| <select id="report-type" class="text-sm border border-gray-300 rounded px 3 py-1 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="pendientes">Pendientes</option> | |
| <option value="historial" selected>Historial</option> | |
| </select> | |
| </div> | |
| <div class="h-80"> | |
| <canvas id="top-clients-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Resumen Anual</h3> | |
| <div class="flex space-x-2"> | |
| <button id="export-report-pdf" class="text-sm bg-red-600 text-white px-4 py-1.5 rounded hover:bg-red-700 flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> PDF | |
| </button> | |
| <button id="export-report-excel" class="text-sm bg-green-600 text-white px-4 py-1.5 rounded hover:bg-green-700 flex items-center"> | |
| <i class="fas fa-file-excel mr-2"></i> Excel | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">A帽o</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ene</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feb</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mar</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abr</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">May</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jun</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jul</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ago</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sep</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Oct</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nov</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dic</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="annual-summary"> | |
| <tr> | |
| <td colspan="14" class="px-6 py-4 text-center text-sm text-gray-500">Cargando datos...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pesta帽a Configuraci贸n --> | |
| <div class="tab-content hidden" id="configuracion-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Respaldo Autom谩tico</h3> | |
| <p class="text-sm text-gray-600 mb-4">Selecciona una carpeta donde se guardar谩n autom谩ticamente los archivos de respaldo cada vez que agregues o actualices un registro.</p> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Carpeta de Respaldo</label> | |
| <div class="flex"> | |
| <input type="text" id="backup-folder" placeholder="Ninguna carpeta seleccionada" readonly | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg bg-gray-50"> | |
| <button onclick="seleccionarCarpeta()" | |
| class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-folder-open mr-1"></i> Seleccionar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg mb-4" id="backup-status"> | |
| <p class="text-sm text-blue-800">Selecciona una carpeta para activar backups.</p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Respaldo Programado</h3> | |
| <p class="text-sm text-gray-600 mb-4">Configura respaldos peri贸dicos que incluyan pendientes e historial con marca de tiempo.</p> | |
| <div class="mb-4"> | |
| <label for="backup-interval" class="block text-sm font-medium text-gray-700 mb-1">Intervalo</label> | |
| <select id="backup-interval" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="0">Desactivado</option> | |
| <option value="5">Cada 5 minutos</option> | |
| <option value="15">Cada 15 minutos</option> | |
| <option value="30">Cada 30 minutos</option> | |
| <option value="60">Cada 1 hora</option> | |
| <option value="120">Cada 2 horas</option> | |
| <option value="1440">Diario</option> | |
| </select> | |
| </div> | |
| <div class="mb 4"> | |
| <label for="backup-format" class="block text-sm font-medium text-gray-700 mb-1">Formato</label> | |
| <select id="backup-format" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="json">JSON</option> | |
| <option value="csv">CSV</option> | |
| </select> | |
| </div> | |
| <button onclick="guardarConfiguracionProgramada()" | |
| class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-save mr-2"></i> Guardar Configuraci贸n | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Integrar C贸digo</h3> | |
| <p class="text-sm text-gray-600 mb-4">Pega aqu铆 el c贸digo JavaScript que deseas ejecutar en el sistema.</p> | |
| <textarea id="code-area" rows="8" placeholder="Pega aqu铆 el c贸digo JavaScript que deseas ejecutar..." | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition mb-4 font-mono text-sm"></textarea> | |
| <div class="flex justify-end"> | |
| <button onclick="integrarCodigo()" | |
| class="bg-purple-600 text-white py-2 px-6 rounded-lg hover:bg-purple-700 transition flex items-center"> | |
| <i class="fas fa-code mr-2"></i> Ejecutar C贸digo | |
| </button> | |
| </div> | |
| <div class="mt-4 p-3 bg-red-50 rounded-lg"> | |
| <p class="text-sm text-red-700"><i class="fas fa-exclamation-triangle mr-2"></i> ADVERTENCIA: Ejecutar c贸digo desconocido puede ser peligroso. Solo usa c贸digo de fuentes confiables.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Strict mode --- | |
| "use strict"; | |
| /******************************* | |
| * Variables Globales | |
| *******************************/ | |
| let modoEdicion = false; | |
| let idEdicion = null; | |
| let backupFolderHandle = null; | |
| let paymentsChart = null; | |
| let categoriesChart = null; | |
| let monthlyPaymentsChart = null; | |
| let topClientsChart = null; | |
| let btnAgregar = document.getElementById('btn-agregar'); | |
| let btnCancelarEdicion = document.getElementById('btn-cancelar-edicion'); | |
| /******************************* | |
| * App Initialization | |
| *******************************/ | |
| async function initializeApp() { | |
| document.getElementById('fecha').valueAsDate = new Date(); | |
| configurarEventosGenerales(); | |
| // Set default tab to dashboard | |
| activarTab('dashboard'); | |
| // Load initial data | |
| try { | |
| const pendientesStored = await memoryStorage.getPendientes(); | |
| if (!pendientesStored || pendientesStored.length === 0) { | |
| await cargarDatosEjemplo(); | |
| } | |
| await cargarDatos(); | |
| await cargarHistorial(); | |
| await updateDashboard(); | |
| await loadReports(); | |
| } catch (error) { | |
| console.error("Error during initial data loading:", error); | |
| alert("Error al cargar los datos iniciales: " + error.message); | |
| } | |
| cargarConfiguracionProgramada(); | |
| } | |
| /******************************* | |
| * Almacenamiento (localForage) | |
| *******************************/ | |
| const memoryStorage = { | |
| async getPendientes() { | |
| const pendientes = await localforage.getItem('pendientes'); | |
| return pendientes || []; | |
| }, | |
| async setPendientes(newData) { | |
| if (!Array.isArray(newData)) { | |
| return Promise.reject(new Error("Invalid data format for pendientes")); | |
| } | |
| return localforage.setItem('pendientes', newData); | |
| }, | |
| async getHistorial() { | |
| const historial = await localforage.getItem('historial'); | |
| return historial || []; | |
| }, | |
| async setHistorial(newData) { | |
| if (!Array.isArray(newData)) { | |
| return Promise.reject(new Error("Invalid data format for historial")); | |
| } | |
| return localforage.setItem('historial', newData); | |
| }, | |
| async addToHistorial(pendiente) { | |
| if (!pendiente || typeof pendiente !== 'object') { | |
| return Promise.reject(new Error("Invalid item format for historial")); | |
| } | |
| let historial = await this.getHistorial(); | |
| const pagoRegistro = { | |
| ...pendiente, | |
| fechaPago: new Date().toISOString().split('T')[0] | |
| }; | |
| historial.push(pagoRegistro); | |
| return this.setHistorial(historial); | |
| }, | |
| async clearData() { | |
| await localforage.removeItem('pendientes'); | |
| await localforage.removeItem('historial'); | |
| } | |
| }; | |
| /******************************* | |
| * Configuraci贸n Eventos Generales | |
| *******************************/ | |
| function configurarEventosGenerales() { | |
| // Tabs | |
| document.querySelectorAll('.tab-link').forEach(tab => { | |
| tab.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const tab = tab.dataset.tab; | |
| activarTab(tab); | |
| }); | |
| }); | |
| // Bot贸n Agregar/Actualizar | |
| btnAgregar?.addEventListener('click', guardarRegistro); | |
| // Bot贸n Cancelar Edici贸n | |
| btnCancelarEdicion?.addEventListener('click', resetearFormulario); | |
| // Filtros de b煤squeda | |
| document.getElementById('buscar')?.addEventListener('input', cargarDatos); | |
| document.getElementById('buscar-historial')?.addEventListener('input', cargarHistorial); | |
| document.getElementById('fecha-inicio')?.addEventListener('change', cargarHistorial); | |
| document.getElementById('fecha-fin')?.addEventListener('change', cargarHistorial); | |
| // Descargar imagen | |
| document.getElementById('descargar-busqueda')?.addEventListener('click', descargarResultadosComoImagen); | |
| // Exportar/Importar | |
| document.getElementById('exportar-json')?.addEventListener('click', exportarPendientesJSON); | |
| document.getElementById('exportar-excel')?.addEventListener('click', exportarPendientesCSV); | |
| document.getElementById('exportar-historial-json')?.addEventListener('click', exportarHistorialJSON); | |
| document.getElementById('exportar-historial-excel')?.addEventListener('click', exportarHistorialCSV); | |
| document.getElementById('importar-json')?.addEventListener('click', importarPendientesJSON); | |
| document.getElementById('importar-excel')?.addEventListener('click', importarPendientesCSV); | |
| // Limpiar datos | |
| document.getElementById('limpiar-datos')?.addEventListener('click', async () => { | |
| if (confirm('驴Est谩 seguro de eliminar todos los datos (pendientes e historial)? Esta acci贸n no se puede deshacer.')) { | |
| try { | |
| await memoryStorage.clearData(); | |
| await cargarDatos(); | |
| await cargarHistorial(); | |
| await updateDashboard(); | |
| await loadReports(); | |
| alert('Todos los datos han sido eliminados.'); | |
| await eliminarBackupsInternos(); | |
| resetearFormulario(); | |
| } catch (error) { | |
| alert("Error al limpiar los datos: " + error.message); | |
| } | |
| } | |
| }); | |
| // Reportes | |
| document.getElementById('report-year')?.addEventListener('change', loadReports); | |
| document.getElementById('report-type')?.addEventListener('change', loadReports); | |
| } | |
| function activarTab(tab) { | |
| // Update active tab in sidebar | |
| document.querySelectorAll('.tab-link').forEach(t => { | |
| t.classList.remove('bg-blue-50', 'text-blue-700'); | |
| t.classList.add('text-gray-700', 'hover:bg-gray-100'); | |
| // Update icon colors | |
| const icon = t.querySelector('i'); | |
| if (icon) { | |
| icon.classList.remove('text-blue-600'); | |
| icon.classList.add('text-gray-500'); | |
| } | |
| }); | |
| // Set active tab | |
| const activeTab = document.querySelector(`.tab-link[data-tab="${tab}"]`); | |
| if (activeTab) { | |
| activeTab.classList.add('bg-blue-50', 'text-blue-700'); | |
| activeTab.classList.remove('text-gray-700', 'hover:bg-gray-100'); | |
| // Update icon color | |
| const icon = activeTab.querySelector('i'); | |
| if (icon) { | |
| icon.classList.add('text-blue-600'); | |
| icon.classList.remove('text-gray-500'); | |
| } | |
| } | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden')); | |
| // Show selected tab content | |
| const contentElement = document.getElementById(`${tab}-content`); | |
| if (contentElement) { | |
| contentElement.classList.remove('hidden'); | |
| } | |
| // Update title | |
| const tabTitles = { | |
| 'dashboard': 'Dashboard', | |
| 'pendientes': 'Pendientes', | |
| 'historial': 'Historial', | |
| 'reportes': 'Reportes', | |
| 'configuracion': 'Configuraci贸n' | |
| }; | |
| document.getElementById('current-tab-title').textContent = tabTitles[tab] || tab; | |
| // Load specific tab data if needed | |
| if (tab === 'dashboard') { | |
| updateDashboard(); | |
| } else if (tab === 'reportes') { | |
| loadReports(); | |
| } | |
| } | |
| /******************************* | |
| * Funciones principales | |
| *******************************/ | |
| async function guardarRegistro() { | |
| const fecha = document.getElementById('fecha').value; | |
| const nombre = document.getElementById('nombre').value.trim(); | |
| const descripcion = document.getElementById('descripcion').value.trim(); | |
| const totalInput = document.getElementById('total').value; | |
| if (!fecha || !nombre || !descripcion || totalInput === '') { | |
| alert('Por favor, complete todos los campos.'); | |
| return; | |
| } | |
| const total = parseFloat(totalInput); | |
| if (isNaN(total)) { | |
| alert('El valor total debe ser un n煤mero v谩lido.'); | |
| return; | |
| } | |
| try { | |
| let pendientes = await memoryStorage.getPendientes(); | |
| let mensajeExito = ''; | |
| if (modoEdicion && idEdicion !== null) { | |
| const index = pendientes.findIndex(item => item.id == idEdicion); | |
| if (index !== -1) { | |
| pendientes[index] = { id: parseInt(idEdicion), fecha, nombre, descripcion, total }; | |
| mensajeExito = 'Registro actualizado correctamente.'; | |
| } else { | |
| alert("Error al actualizar: No se encontr贸 el registro."); | |
| resetearFormulario(); | |
| return; | |
| } | |
| } else { | |
| const nuevoId = Date.now(); | |
| const nuevoRegistro = { id: nuevoId, fecha, nombre, descripcion, total }; | |
| pendientes.push(nuevoRegistro); | |
| mensajeExito = 'Registro agregado correctamente.'; | |
| } | |
| await memoryStorage.setPendientes(pendientes); | |
| await generarBackupInterno().catch(err => console.error("Error during internal backup:", err)); | |
| resetearFormulario(); | |
| await cargarDatos(); | |
| await updateDashboard(); | |
| await loadReports(); | |
| } catch (error) { | |
| alert(`Error al guardar el registro: ${error.message}`); | |
| } | |
| } | |
| async function cargarDatos() { | |
| const tbody = document.getElementById('pendientes-body'); | |
| const busqueda = document.getElementById('buscar').value.toLowerCase(); | |
| tbody.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">Cargando...</td></tr>'; | |
| try { | |
| let pendientes = await memoryStorage.getPendientes(); | |
| // Filtrar | |
| let filtrados = pendientes.filter(item => | |
| !busqueda || | |
| (item.nombre && item.nombre.toLowerCase().includes(busqueda)) || | |
| (item.descripcion && item.descripcion.toLowerCase().includes(busqueda)) || | |
| (item.fecha && item.fecha.includes(busqueda)) | |
| ); | |
| // Ordenar por fecha (ascendente) | |
| filtrados.sort((a, b) => { | |
| try { return new Date(a.fecha) - new Date(b.fecha); } | |
| catch(e) { return 0; } | |
| }); | |
| tbody.innerHTML = ""; | |
| let sumaTotal = 0; | |
| if (filtrados.length === 0) { | |
| const msg = busqueda ? "No se encontraron registros con ese criterio." : "No hay registros pendientes."; | |
| tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">${msg}</td></tr>`; | |
| } else { | |
| filtrados.forEach(item => { | |
| let fechaFormateada = item.fecha; | |
| try { | |
| const dateParts = item.fecha.split('-'); | |
| if (dateParts.length === 3) { | |
| const year = parseInt(dateParts[0]); | |
| const month = parseInt(dateParts[1]) - 1; | |
| const day = parseInt(dateParts[2]); | |
| fechaFormateada = new Date(year, month, day).toLocaleDateString(); | |
| } | |
| } catch (e) { console.warn(`Fecha inv谩lida: ${item.fecha}`); } | |
| const row = tbody.insertRow(); | |
| row.className = 'hover:bg-gray-50'; | |
| // Fecha | |
| const cellFecha = row.insertCell(); | |
| cellFecha.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellFecha.textContent = fechaFormateada; | |
| // Nombre | |
| const cellNombre = row.insertCell(); | |
| cellNombre.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellNombre.textContent = item.nombre; | |
| // Descripci贸n | |
| const cellDesc = row.insertCell(); | |
| cellDesc.className = 'px-6 py-4 text-sm text-gray-900'; | |
| cellDesc.textContent = item.descripcion; | |
| // Total | |
| const cellTotal = row.insertCell(); | |
| cellTotal.className = 'px-6 py-4 whitespace-nowrap text-sm text-right font-medium'; | |
| cellTotal.textContent = `$${item.total?.toFixed(2) ?? '0.00'}`; | |
| cellTotal.style.color = item.total < 0 ? '#dc2626' : '#1f2937'; | |
| // Acciones | |
| const cellAcciones = row.insertCell(); | |
| cellAcciones.className = 'px-6 py-4 whitespace-nowrap text-right text-sm font-medium'; | |
| const btnContainer = document.createElement('div'); | |
| btnContainer.className = 'flex space-x-2 justify-end'; | |
| // Bot贸n Editar | |
| const btnEditar = document.createElement('button'); | |
| btnEditar.className = 'action-btn text-blue-600 hover:text-blue-900'; | |
| btnEditar.title = 'Editar este registro'; | |
| btnEditar.innerHTML = '<i class="fas fa-edit"></i>'; | |
| btnEditar.addEventListener('click', () => editarRegistro(item.id)); | |
| // Bot贸n Eliminar | |
| const btnEliminar = document.createElement('button'); | |
| btnEliminar.className = 'action-btn text-red-600 hover:text-red-900'; | |
| btnEliminar.title = 'Eliminar este registro'; | |
| btnEliminar.innerHTML = '<i class="fas fa-trash"></i>'; | |
| btnEliminar.addEventListener('click', () => eliminarRegistro(item.id)); | |
| // Bot贸n Pagado | |
| const btnPagado = document.createElement('button'); | |
| btnPagado.className = 'action-btn text-green-600 hover:text-green-900'; | |
| btnPagado.title = 'Marcar como pagado'; | |
| btnPagado.innerHTML = '<i class="fas fa-check-circle"></i>'; | |
| btnPagado.addEventListener('click', () => marcarComoPagado(item.id)); | |
| btnContainer.appendChild(btnEditar); | |
| btnContainer.appendChild(btnEliminar); | |
| btnContainer.appendChild(btnPagado); | |
| cellAcciones.appendChild(btnContainer); | |
| // Sum total | |
| if (typeof item.total === 'number' && !isNaN(item.total)) { | |
| sumaTotal += item.total; | |
| } | |
| }); | |
| } | |
| document.getElementById('suma-total').textContent = `$${sumaTotal.toFixed(2)}`; | |
| document.getElementById('pendientes-summary-total').textContent = `$${sumaTotal.toFixed(2)}`; | |
| document.getElementById('pendientes-summary-count').textContent = filtrados.length; | |
| } catch (error) { | |
| tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-red-500">Error al cargar datos: ${error.message}</td></tr>`; | |
| } | |
| } | |
| async function cargarHistorial() { | |
| const tbody = document.getElementById('historial-body'); | |
| const busqueda = document.getElementById('buscar-historial').value.toLowerCase(); | |
| const fechaInicio = document.getElementById('fecha-inicio')?.value; | |
| const fechaFin = document.getElementById('fecha-fin')?.value; | |
| tbody.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">Cargando...</td></tr>'; | |
| try { | |
| let historial = await memoryStorage.getHistorial(); | |
| // Filtrar | |
| historial = historial.filter(item => { | |
| // Filtro de b煤squeda | |
| const matchSearch = !busqueda || | |
| (item.nombre && item.nombre.toLowerCase().includes(busqueda)) || | |
| (item.descripcion && item.descripcion.toLowerCase().includes(busqueda)) || | |
| (item.fecha && item.fecha.includes(busqueda)) || | |
| (item.fechaPago && item.fechaPago.includes(busqueda)); | |
| // Filtro por fecha | |
| let matchDate = true; | |
| if (fechaInicio) { | |
| matchDate = matchDate && item.fechaPago >= fechaInicio; | |
| } | |
| if (fechaFin) { | |
| matchDate = matchDate && item.fechaPago <= fechaFin; | |
| } | |
| return matchSearch && matchDate; | |
| }); | |
| // Ordenar por fecha de pago (descendente) | |
| historial.sort((a, b) => { | |
| try { return new Date(b.fechaPago) - new Date(a.fechaPago); } | |
| catch(e) { return 0; } | |
| }); | |
| tbody.innerHTML = ""; | |
| let sumaTotalHistorial = 0; | |
| if (historial.length === 0) { | |
| const msg = busqueda ? "No se encontraron registros con ese criterio." : "El historial de pagos est谩 vac铆o."; | |
| tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">${msg}</td></tr>`; | |
| } else { | |
| historial.forEach(item => { | |
| let fechaPagoF = item.fechaPago; | |
| let fechaRegF = item.fecha; | |
| try { | |
| const dpParts = item.fechaPago?.split('-'); | |
| if (dpParts?.length === 3) fechaPagoF = new Date(parseInt(dpParts[0]), parseInt(dpParts[1]) - 1, parseInt(dpParts[2])).toLocaleDateString(); | |
| const drParts = item.fecha?.split('-'); | |
| if (drParts?.length === 3) fechaRegF = new Date(parseInt(drParts[0]), parseInt(drParts[1]) - 1, parseInt(drParts[2])).toLocaleDateString(); | |
| } catch (e) { /* Ignore date formatting errors silently */ } | |
| const row = tbody.insertRow(); | |
| row.className = 'hover:bg-gray-50'; | |
| // Fecha Pago | |
| const cellFechaPago = row.insertCell(); | |
| cellFechaPago.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellFechaPago.textContent = fechaPagoF; | |
| // Fecha Registro | |
| const cellFechaReg = row.insertCell(); | |
| cellFechaReg.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellFechaReg.textContent = fechaRegF; | |
| // Nombre | |
| const cellNombre = row.insertCell(); | |
| cellNombre.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellNombre.textContent = item.nombre; | |
| // Descripci贸n | |
| const cellDesc = row.insertCell(); | |
| cellDesc.className = 'px-6 py-4 text-sm text-gray-900'; | |
| cellDesc.textContent = item.descripcion; | |
| // Total | |
| const cellTotal = row.insertCell(); | |
| cellTotal.className = 'px-6 py-4 whitespace-nowrap text-sm text-right font-medium'; | |
| cellTotal.textContent = `$${item.total?.toFixed(2) ?? '0.00'}`; | |
| cellTotal.style.color = item.total < 0 ? '#dc2626' : '#1f2937'; | |
| if (typeof item.total === 'number' && !isNaN(item.total)) { | |
| sumaTotalHistorial += item.total; | |
| } | |
| }); | |
| } | |
| document.getElementById('suma-total-historial').textContent = `$${sumaTotalHistorial.toFixed(2)}`; | |
| document.getElementById('historial-summary-total').textContent = `$${sumaTotalHistorial.toFixed(2)}`; | |
| document.getElementById('historial-summary-count').textContent = historial.length; | |
| // Update filter info | |
| let filterInfo = "Mostrando todos los registros"; | |
| if (fechaInicio || fechaFin) { | |
| filterInfo = `Filtrado por fecha: ${fechaInicio || 'inicio'} - ${fechaFin || 'fin'}`; | |
| } | |
| document.getElementById('historial-filter-info').textContent = filterInfo; | |
| } catch (error) { | |
| tbody.innerHTML = `<tr><td colspan="5, class="px-6 py-4 text-center text-sm text-red-500">Error al cargar historial: ${error.message}</td></tr>`; | |
| } | |
| } | |
| /******************************* | |
| * Funciones de edici贸n/eliminaci贸n | |
| *******************************/ | |
| async function eliminarRegistro(id) { | |
| if (!id) return; | |
| if (confirm(`驴Est谩 seguro de eliminar permanentemente el registro pendiente?`)) { | |
| try { | |
| let pendientes = await memoryStorage.getPendientes(); | |
| const originalLength = pendientes.length; | |
| pendientes = pendientes.filter(item => item.id != id); | |
| if (pendientes.length < originalLength) { | |
| await memoryStorage.setPendientes(pendientes); | |
| await cargarDatos(); | |
| await updateDashboard(); | |
| await loadReports(); | |
| await generarBackupInterno().catch(err => console.error("Backup failed after delete:", err)); | |
| if (modoEdicion && idEdicion == id) { | |
| resetearFormulario(); | |
| } | |
| } else { | |
| alert('Error: No se encontr贸 el registro para eliminar.'); | |
| } | |
| } catch (error) { | |
| alert(`Error al eliminar el registro: ${error.message}`); | |
| } | |
| } | |
| } | |
| async function marcarComoPagado(id) { | |
| if (!id) return; | |
| if (confirm(`驴Marcar este registro como pagado y moverlo al historial?`)) { | |
| try { | |
| let pendientes = await memoryStorage.getPendientes(); | |
| const index = pendientes.findIndex(item => item.id == id); | |
| if (index !== -1) { | |
| const itemPagado = pendientes[index]; | |
| await memoryStorage.addToHistorial(itemPagado); | |
| pendientes.splice(index, 1); | |
| await memoryStorage.setPendientes(pendientes); | |
| await cargarDatos(); | |
| await cargarHistorial(); | |
| await updateDashboard(); | |
| await loadReports(); | |
| await generarBackupInterno().catch(err => console.error("Backup failed after mark paid:", err)); | |
| if (modoEdicion && idEdicion == id) { | |
| resetearFormulario(); | |
| } | |
| } else { | |
| alert('Error: No se encontr贸 el registro para marcar como pagado.'); | |
| } | |
| } catch(error) { | |
| alert(`Error al marcar como pagado: ${error.message}`); | |
| } | |
| } | |
| } | |
| async function editarRegistro(id) { | |
| if (!id) return; | |
| try { | |
| let pendientes = await memoryStorage.getPendientes(); | |
| const registro = pendientes.find(item => item.id == id); | |
| if (registro) { | |
| document.getElementById('fecha').value = registro.fecha; | |
| document.getElementById('nombre').value = registro.nombre; | |
| document.getElementById('descripcion').value = registro.descripcion; | |
| document.getElementById('total').value = registro.total; | |
| modoEdicion = true; | |
| idEdicion = id; | |
| btnAgregar.innerHTML = '<i class="fas fa-save mr-2"></i> Actualizar'; | |
| btnAgregar.className = 'bg-yellow-600 text-white py-2 px-6 rounded-lg hover:bg-yellow-700 transition flex items-center'; | |
| btnCancelarEdicion.classList.remove('hidden'); | |
| // Scroll to form | |
| const nombreInput = document.getElementById('nombre'); | |
| if (nombreInput) { | |
| nombreInput.focus(); | |
| nombreInput.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } | |
| } else { | |
| alert("Error: No se pudo encontrar el registro para editar."); | |
| resetearFormulario(); | |
| } | |
| } catch (error) { | |
| alert(`Error al preparar la edici贸n: ${error.message}`); | |
| resetearFormulario(); | |
| } | |
| } | |
| function resetearFormulario() { | |
| document.getElementById('fecha').valueAsDate = new Date(); | |
| document.getElementById('nombre').value = ''; | |
| document.getElementById('descripcion').value = ''; | |
| document.getElementById('total').value = ''; | |
| modoEdicion = false; | |
| idEdicion = null; | |
| btnAgregar.innerHTML = '<i class="fas fa-plus mr-2"></i> Agregar'; | |
| btnAgregar.className = 'bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 transition flex items-center'; | |
| btnCancelarEdicion.classList.add('hidden'); | |
| document.getElementById('nombre').focus(); | |
| } | |
| /******************************* | |
| * Dashboard y Reportes | |
| *******************************/ | |
| async function updateDashboard() { | |
| try { | |
| const pendientes = await memoryStorage.getPendientes(); | |
| const historial = await memoryStorage.getHistorial(); | |
| // Totales | |
| const totalPendiente = pendientes.reduce((sum, item) => sum + (item.total || 0), 0); | |
| const totalPagado = historial.reduce((sum, item) => sum + (item.total || 0), 0); | |
| // Contadores | |
| const countPendientes = pendientes.length; | |
| const countHistorial = historial.length; | |
| // Mes actual | |
| const now = new Date(); | |
| const currentMonth = now.getMonth() + 1; | |
| const currentYear = now.getFullYear(); | |
| const monthPagado = historial | |
| .filter(item => { | |
| const dateParts = item.fechaPago?.split('-'); | |
| if (dateParts?.length === 3) { | |
| return parseInt(dateParts[0]) === currentYear && parseInt(dateParts[1]) === currentMonth; | |
| } | |
| return false; | |
| }) | |
| .reduce((sum, item) => sum + (item.total || 0), 0); | |
| // Vencidos (m谩s de 30 d铆as) | |
| const countVencidos = pendientes.filter(item => { | |
| try { | |
| const itemDate = new Date(item.fecha); | |
| const diffTime = now - itemDate; | |
| const diffDays = diffTime / (1000 * 60 * 60 * 24); | |
| return diffDays > 30; | |
| } catch (e) { | |
| return false; | |
| } | |
| }).length; | |
| // Actualizar UI | |
| document.getElementById('total-pendiente').textContent = `$${totalPendiente.toFixed(2)}`; | |
| document.getElementById('total-pagado').textContent = `$${totalPagado.toFixed(2)}`; | |
| document.getElementById('month-pagado').textContent = `$${monthPagado.toFixed(2)}`; | |
| document.getElementById('count-pendientes').textContent = countPendientes; | |
| document.getElementById('count-historial').textContent = countHistorial; | |
| document.getElementById('count-vencidos').textContent = countVencidos; | |
| document.getElementById('last-update').textContent = new Date().toLocaleTimeString(); | |
| // Pr贸ximos vencimientos (pr贸ximos 7 d铆as) | |
| const upcomingPayments = pendientes | |
| .filter(item => { | |
| try { | |
| const itemDate = new Date(item.fecha); | |
| const diffTime = itemDate - now; | |
| const diffDays = diffTime / (1000 * 60 * 60 * 24); | |
| return diffDays > 0 && diffDays <= 7; | |
| } catch (e) { | |
| return false; | |
| } | |
| }) | |
| .sort((a, b) => new Date(a.fecha) - new Date(b.fecha)) | |
| .slice(0, 5); | |
| const upcomingTbody = document.getElementById('upcoming-payments'); | |
| upcomingTbody.innerHTML = ''; | |
| if (upcomingPayments.length === 0) { | |
| upcomingTbody.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No hay pagos pr贸ximos en los pr贸ximos 7 d铆as</td></tr>'; | |
| } else { | |
| upcomingPayments.forEach(item => { | |
| const row = upcomingTbody.insertRow(); | |
| row.className = 'hover:bg-gray-50'; | |
| // Fecha | |
| const cellFecha = row.insertCell(); | |
| cellFecha.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| try { | |
| const dateParts = item.fecha.split('-'); | |
| if (dateParts.length === 3) { | |
| cellFecha.textContent = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2])).toLocaleDateString(); | |
| } else { | |
| cellFecha.textContent = item.fecha; | |
| } | |
| } catch (e) { | |
| cellFecha.textContent = item.fecha; | |
| } | |
| // Nombre | |
| const cellNombre = row.insertCell(); | |
| cellNombre.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| cellNombre.textContent = item.nombre; | |
| // Descripci贸n | |
| const cellDesc = row.insertCell(); | |
| cellDesc.className = 'px-6 py-4 text-sm text-gray-900'; | |
| cellDesc.textContent = item.descripcion; | |
| // Total | |
| const cellTotal = row.insertCell(); | |
| cellTotal.className = 'px-6 py-4 whitespace-nowrap text-sm text-right font-medium'; | |
| cellTotal.textContent = `$${item.total?.toFixed(2) ?? '0.00'}`; | |
| cellTotal.style.color = item.total < 0 ? '#dc2626' : '#1f2937'; | |
| // Estado | |
| const cellEstado = row.insertCell(); | |
| cellEstado.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900'; | |
| const badge = document.createElement('span'); | |
| badge.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium'; | |
| try { | |
| const itemDate = new Date(item.fecha); | |
| const diffTime = itemDate - now; | |
| const diffDays = diffTime / (1000 * 60 * 60 * 24); | |
| if (diffDays < 0) { | |
| badge.textContent = 'Vencido'; | |
| badge.classList.add('bg-red-100', 'text-red-800'); | |
| } else if (diffDays <= 3) { | |
| badge.textContent = 'Pr贸ximo'; | |
| badge.classList.add('bg-yellow-100', 'text-yellow-800'); | |
| } else { | |
| badge.textContent = 'Pendiente'; | |
| badge.classList.add('bg-blue-100', 'text-blue-800'); | |
| } | |
| } catch (e) { | |
| badge.textContent = 'Pendiente'; | |
| badge.classList.add('bg-blue-100', 'text-blue-800'); | |
| } | |
| cellEstado.appendChild(badge); | |
| }); | |
| } | |
| // Actualizar gr谩ficos | |
| actualizarGraficosDashboard(pendientes, historial); | |
| } catch (error) { | |
| console.error("Error updating dashboard:", error); | |
| } | |
| } | |
| function actualizarGraficosDashboard(pendientes, historial) { | |
| // Gr谩fico de evoluci贸n de pagos | |
| const ctxPayments = document.getElementById('payments-chart').getContext('2d'); | |
| // Datos de ejemplo para el gr谩fico | |
| const labels = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']; | |
| const currentMonth = new Date().getMonth(); | |
| const currentYear = new Date().getFullYear(); | |
| // Calcular totales por mes | |
| const monthlyTotals = Array(12).fill(0); | |
| historial.forEach(item => { | |
| try { | |
| const dateParts = item.fechaPago?.split('-'); | |
| if (dateParts?.length === 3) { | |
| const year = parseInt(dateParts[0]); | |
| const month = parseInt(dateParts[1]) - 1; | |
| if (year === currentYear && month >= 0 && month < 12) { | |
| monthlyTotals[month] += item.total || 0; | |
| } | |
| } | |
| } catch (e) { /* Ignore errors */ } | |
| }); | |
| if (paymentsChart) { | |
| paymentsChart.destroy(); | |
| } | |
| paymentsChart = new Chart(ctxPayments, { | |
| type: 'line', | |
| data: { | |
| labels: labels, | |
| datasets: [{ | |
| label: 'Pagos por mes', | |
| data: monthlyTotals, | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 2, | |
| tension: 0.1, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0 | |
| </html> |