feat(auditoria): nueva sección operativa con métricas comparativas, widgets configurables y tendencias (Feature/metrics audit proposed section)

docs/pr-5-metrics-audit.md

@@ -0,0 +1,58 @@
+# PR 5 - Auditoria Operativa y Metricas Comparativas
+
+## Objetivo
+Elevar la seccion de metricas a una experiencia de auditoria operativa util para negocio y liderazgo tecnico, permitiendo analisis diario/mensual, lectura rapida de tendencias y comparacion entre periodos sin salir del flujo principal.
+
+## Alcance implementado
+- Renombre funcional en navegacion: `Metricas` -> `Auditoria`.
+- Rediseno de la seccion hacia un layout ejecutivo, con:
+  - Cabecera de contexto operativo (fecha de corte).
+  - KPIs principales del dia con variacion porcentual.
+  - Vistas por periodo (diaria, mensual y combinada).
+  - Widgets configurables para tabla, barras y resumen ejecutivo.
+- Nuevos indicadores procesados en backend:
+  - Tasa de cancelacion (diaria y mensual).
+  - Ticket promedio (diario y mensual).
+  - Pico de facturacion (dia y mes).
+  - Acumulados de facturacion para ventanas de analisis.
+- Visualizacion comparativa sin librerias externas:
+  - Barras normalizadas para reservas creadas y facturacion.
+  - Lectura rapida para detectar picos/caidas.
+- Ajuste de pruebas para reflejar la nueva narrativa de pantalla.
+
+## Archivos modificados
+- `pms/templates/main.html`
+- `pms/templates/metrics_audit.html`
+- `pms/views.py`
+- `pms/statics/css/style.css`
+- `pms/tests.py`
+
+## Detalle tecnico por componente
+### Navegacion
+Se actualiza el label del item en toolbar a `Auditoria`, alineado con el objetivo de negocio de la funcionalidad.
+
+### Backend (procesamiento)
+La vista `MetricsAuditView` incorpora calculos adicionales para enriquecer la toma de decisiones:
+- porcentajes normalizados para visualizaciones de barras,
+- metricas derivadas (rate/avg/peak),
+- agregados diarios y mensuales listos para presentacion.
+
+### Frontend (UX/UI)
+Se implementa una interfaz mas orientada a analitica operativa:
+- controles de vista por periodo,
+- selector de widgets visibles,
+- bloques de resumen ejecutivo,
+- tablas y barras para analisis comparativo,
+- comportamiento responsive para desktop y mobile.
+
+### Calidad y mantenibilidad
+La solucion reutiliza datos existentes del dominio `Booking` y evita dependencias adicionales, manteniendo bajo costo de mantenimiento y facil evolucion futura.
+
+## Pruebas ejecutadas
+- `python manage.py test pms.tests.MetricsAuditTests`
+- Resultado: **OK (3/3)**
+
+## Impacto esperado
+- Mayor velocidad para identificar cambios de comportamiento operativo.
+- Mejor soporte para conversaciones de negocio (ingresos, cancelacion, tendencia).
+- Base solida para evolucionar a widgets avanzados (forecast, cohortes, alertas).

pms/statics/css/style.css

@@ -38,4 +38,201 @@ body{
     justify-content: center;
     height: 100%;
     align-items: center;
-}
+}
+.metrics-grid{
+    display: grid;
+    gap: 0.9rem;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+
+.metrics-value{
+    font-size: 1.8rem;
+    font-weight: 700;
+    line-height: 1.15;
+}
+
+.metrics-delta{
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-top: 0.35rem;
+}
+
+.metrics-up{
+    color: #0f766e;
+}
+
+.metrics-down{
+    color: #c2410c;
+}
+
+.metrics-flat{
+    color: #6c757d;
+}
+
+.metrics-compact{
+    background: #f5f5f5;
+    border: 1px solid #e7e7e7;
+    border-radius: 12px;
+    padding: 0.75rem;
+    height: 100%;
+}
+
+.audit-page{
+    padding-bottom: 2rem;
+}
+
+.audit-hero{
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: flex-start;
+}
+
+.audit-period-badge{
+    border: 1px solid var(--app-border);
+    border-radius: 999px;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--app-muted);
+    background: var(--app-surface);
+}
+
+.audit-toolbar .btn{
+    border-radius: 999px;
+}
+
+.audit-toolbar .btn-outline-secondary{
+    color: var(--app-text);
+    border-color: var(--app-border);
+}
+
+.audit-toolbar .btn-outline-secondary:hover{
+    color: var(--app-text);
+    border-color: var(--app-border);
+    background: var(--app-hover);
+}
+
+.audit-toggle-btn.is-active,
+.audit-widget-btn.is-active{
+    background: var(--app-primary);
+    border-color: var(--app-primary);
+    color: #fff;
+}
+
+.audit-mini-title{
+    font-size: 0.8rem;
+    color: var(--app-muted);
+    font-weight: 600;
+}
+
+.audit-mini-value{
+    font-size: 1.45rem;
+    font-weight: 700;
+    color: var(--app-text);
+    margin-top: 0.3rem;
+}
+
+.audit-mini-sub{
+    margin-top: 0.2rem;
+    color: var(--app-muted);
+    font-size: 0.8rem;
+}
+
+.audit-bar-row{
+    display: grid;
+    grid-template-columns: 90px 1fr auto;
+    gap: 0.6rem;
+    align-items: center;
+    margin-bottom: 0.4rem;
+}
+
+.audit-bar-label{
+    color: var(--app-muted);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.audit-bar-track{
+    width: 100%;
+    height: 10px;
+    border-radius: 999px;
+    background: var(--app-hover);
+    overflow: hidden;
+}
+
+.audit-bar{
+    height: 10px;
+    border-radius: 999px;
+}
+
+.audit-bar-created{
+    background: linear-gradient(90deg, #1f4a6d, #2f6f9f);
+}
+
+.audit-bar-revenue{
+    background: linear-gradient(90deg, #2c6b2f, #49a356);
+}
+
+.audit-bar-number{
+    font-size: 0.78rem;
+    color: var(--app-muted);
+    font-weight: 600;
+    min-width: 84px;
+    text-align: right;
+}
+
+.audit-page .table{
+    color: var(--app-text);
+}
+
+.audit-page .table thead th{
+    color: var(--app-muted);
+    font-weight: 700;
+}
+
+.audit-page .table > :not(caption) > * > *{
+    border-color: var(--app-border);
+}
+
+[data-theme="dark"] .audit-period-badge{
+    background: #111827;
+    border-color: #334155;
+    color: #cbd5e1;
+}
+
+[data-theme="dark"] .audit-toolbar .btn-outline-secondary{
+    color: #cbd5e1;
+    border-color: #475569;
+}
+
+[data-theme="dark"] .audit-toolbar .btn-outline-secondary:hover{
+    color: #e2e8f0;
+    border-color: #64748b;
+    background: #334155;
+}
+
+[data-theme="dark"] .audit-toggle-btn.is-active,
+[data-theme="dark"] .audit-widget-btn.is-active{
+    background: #3aa7d8;
+    border-color: #3aa7d8;
+    color: #04111b;
+}
+
+[data-theme="dark"] .audit-bar-created{
+    background: linear-gradient(90deg, #3aa7d8, #60c0ea);
+}
+
+[data-theme="dark"] .audit-bar-revenue{
+    background: linear-gradient(90deg, #22c55e, #4ade80);
+}
+
+@media (max-width: 768px){
+    .audit-hero{
+        flex-direction: column;
+    }
+
+    .audit-bar-row{
+        grid-template-columns: 68px 1fr auto;
+    }
+}

pms/templates/main.html

@@ -34,6 +34,9 @@
                      <li class="nav-item">
                         <a class="nav-link" href="{% url 'rooms'%}">Habitaciones</a>
                      </li>
+                     <li class="nav-item">
+                        <a class="nav-link" href="{% url 'metrics_audit'%}">Auditoría</a>
+                     </li>
                   </ul>
                   <form action="{% url 'booking_search'%}" method="GET" class="d-flex">
                      <input class="form-control me-2" type="search" required name="filter" placeholder="Nombre o Localizador" aria-label="Search">
@@ -49,4 +52,4 @@
         {% endblock %}
     </div>
 </body>
-</html>
+</html>