feat: Implementar página dedicada de gráficos para análisis de pagos de agua

- Crear nueva página /graficos con 4 tipos de gráficos interactivos
- Agregar compatibilidad con tema oscuro en selectores
- Implementar exportación a PDF profesional con encabezados
- Agregar campo 'Monto Real del Recibo' a configuración mensual
- Crear migración para nueva columna real_amount en monthly_bills
- Mejorar filtros con botones interactivos en lugar de select múltiple
- Agregar resumen ejecutivo con estadísticas detalladas
- Optimizar espacio visual y responsividad de gráficos
- Integrar Chart.js y jsPDF para funcionalidad avanzada
- Corregir problemas de carga de datos y filtros dinámicos

views/configurar/index.php

@@ -15,7 +15,7 @@
 </div>
 
 <div class="row">
-    <?php foreach ($months as $month): 
+    <?php foreach ($months as $month):
         $bill = $monthlyBills[$month] ?? null;
     ?>
         <div class="col-md-4 mb-3">
@@ -37,6 +37,11 @@
                         <input type="number" step="0.01" class="form-control form-control-sm"
                                id="per_house_<?= $month ?>" value="<?= $bill['amount_per_house'] ?? '' ?>">
                     </div>
+                    <div class="mb-2">
+                        <small class="text-muted">Monto Real del Recibo</small>
+                        <input type="number" step="0.01" class="form-control form-control-sm"
+                               id="real_<?= $month ?>" value="<?= $bill['real_amount'] ?? '' ?>">
+                    </div>
                     <div class="mb-2">
                         <small class="text-muted">Fecha de Vencimiento</small>
                         <input type="date" class="form-control form-control-sm"
@@ -69,6 +74,7 @@ document.getElementById('yearSelect').addEventListener('change', function() {
 function saveMonth(month) {
     const total = document.getElementById('total_' + month).value;
     const perHouse = document.getElementById('per_house_' + month).value;
+    const realAmount = document.getElementById('real_' + month).value;
     const dueDate = document.getElementById('due_' + month).value;
     const year = <?= $year ?>;
 
@@ -85,6 +91,7 @@ function saveMonth(month) {
             month: month,
             total_amount: parseFloat(total),
             amount_per_house: parseFloat(perHouse),
+            real_amount: realAmount ? parseFloat(realAmount) : null,
             due_date: dueDate || null
         })
     })