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
This commit is contained in:
Administrador Ibiza
2026-01-03 22:23:05 -06:00
parent 5e714ebae9
commit 0858a9c9cd
7 changed files with 1149 additions and 17 deletions

View File

@@ -93,6 +93,26 @@ body {
box-shadow: 0 0 0 0.25rem rgba(var(--navbar-bg-color), 0.25);
}
/* Select múltiple específico */
.form-select[multiple] {
background-color: var(--input-bg-color) !important;
border-color: var(--input-border-color) !important;
color: var(--input-text-color) !important;
}
.form-select[multiple] option {
background-color: var(--input-bg-color) !important;
color: var(--input-text-color) !important;
padding: 0.25rem 0.5rem !important;
}
.form-select[multiple] option:checked {
background-color: rgba(13, 110, 253, 0.2) !important;
color: var(--input-text-color) !important;
}
.dark-mode .form-select[multiple] option:checked {
background-color: rgba(105, 166, 255, 0.2) !important;
color: var(--input-text-color) !important;
}
/* --- TABLAS (Método Bootstrap) --- */
.table {
--bs-table-color: var(--table-color);
@@ -198,3 +218,20 @@ table { font-size: 14px; }
.dark-mode #theme-toggle {
color: var(--navbar-color);
}
/* Botones de checkboxes para meses */
.dark-mode .btn-outline-primary {
border-color: var(--input-border-color) !important;
color: var(--input-text-color) !important;
background-color: var(--input-bg-color) !important;
}
.dark-mode .btn-outline-primary:hover {
background-color: var(--navbar-bg-color) !important;
border-color: var(--navbar-bg-color) !important;
color: var(--navbar-color) !important;
}
.dark-mode .btn-check:checked + .btn-outline-primary {
background-color: var(--navbar-bg-color) !important;
border-color: var(--navbar-bg-color) !important;
color: var(--navbar-color) !important;
}