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/layout/base.php

@@ -53,11 +53,16 @@
                             <i class="bi bi-cash-coin"></i> Finanzas
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link <?= $page == 'reportes' ? 'active' : '' ?>" href="/dashboard.php?page=reportes">
-                            <i class="bi bi-file-earmark-bar-graph"></i> Reportes
-                        </a>
-                    </li>
+                     <li class="nav-item">
+                         <a class="nav-link <?= $page == 'graficos' ? 'active' : '' ?>" href="/dashboard.php?page=graficos">
+                             <i class="bi bi-bar-chart-line-fill"></i> Gráficos
+                         </a>
+                     </li>
+                     <li class="nav-item">
+                         <a class="nav-link <?= $page == 'reportes' ? 'active' : '' ?>" href="/dashboard.php?page=reportes">
+                             <i class="bi bi-file-earmark-bar-graph"></i> Reportes
+                         </a>
+                     </li>
                     <?php if (Auth::isAdmin()): ?>
                     <li class="nav-item">
                         <a class="nav-link <?= $page == 'importar' ? 'active' : '' ?>" href="/dashboard.php?page=importar">
@@ -115,6 +120,7 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="<?= SITE_URL ?>/assets/js/theme.js"></script>
     <footer class="footer mt-auto py-3">
         <div class="container-fluid text-center">