<!-- 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>
