# Dashboard web — Especificación Entrega 5 del proyecto. Define las pantallas, vistas y endpoints del dashboard que complementa al email diario y al email inmediato. El dashboard es **pull**: el usuario entra cuando quiere y consulta el estado global. Es la única vista donde se puede ver el panorama completo (todos los procesos activos, el calendario unificado, el histórico de temarios, las propuestas de mejora pendientes). --- ## 1. Arquitectura general Stack recomendado: backend Python (FastAPI o Django) sirviendo JSON + frontend ligero (HTMX, Alpine.js o Vue 3) renderizando HTML server-side con interactividad mínima. **No es necesario un SPA pesado**: la aplicación tiene pocos clientes simultáneos y datos que cambian poco, no justifica React/Next. Autenticación: email + contraseña o magic link. Si la academia ya tiene sistema de usuarios, integración por SSO. Roles soportados (heredados del campo `usuarios.rol` en BD): - `admin_sistema`: ve todo, gestiona reglas del sistema. - `academia_direccion`: ve métricas globales de su organización, gestiona reglas de organización. - `academia_contenidos`: ve sobre todo bases, diffs y temarios. - `academia_comercial`: ve OEPs, oportunidades, fechas de captación. - `opositor_individual`: ve solo lo suyo (procesos suscritos directamente). --- ## 2. Pantallas ### 2.1 Inicio (`/`) Es la pantalla por defecto al entrar. Estructura: ``` ┌──────────────────────────────────────────────────────────────────┐ │ 👋 Hola [nombre] 🔔 3 alertas nuevas │ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ ⚡ ALERTAS PENDIENTES DE REVISIÓN │ │ │ │ │ │ │ │ 🟢 Bases TAG Madrid publicadas hace 2 horas │ │ │ │ 🟠 Fin plazo Inspector Hacienda en 3 días │ │ │ │ 🟣 Diff temario Auxiliar AGE >25% hace 6 horas │ │ │ │ │ │ │ │ [Ver todas las alertas →] │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ ESTA SEMANA │ │ ┌──────────────┬──────────────┬──────────────┬──────────────┐ │ │ │ 12 │ 4 │ 8 │ 27 │ │ │ │ procesos │ bases │ plazos │ procesos │ │ │ │ activos │ pendientes │ abiertos │ seguidos │ │ │ └──────────────┴──────────────┴──────────────┴──────────────┘ │ │ │ │ PRÓXIMAS FECHAS │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 📅 15-jun · Fin plazo Inspector Hacienda │ │ │ │ 📅 23-jun · 1er ejercicio Técnico Administración │ │ │ │ 📅 02-jul · Lista def. admitidos TAG Madrid │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ PROCESOS HUÉRFANOS (necesitan atención) │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ ⚠️ Inspectores SS — 14 meses sin bases │ │ │ │ ⚠️ TIC Junta Andalucía — 9 meses sin apertura plazo │ │ │ └────────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────────┘ ``` Cargas: las cuatro tarjetas se calculan con queries simples sobre las vistas `procesos_activos_resumen` y `eventos_pendientes_inmediato`. ### 2.2 Detalle de proceso (`/procesos/{id_proceso}`) La pantalla más importante. Vista timeline con las 10 fases del proceso y su estado actual: ``` ┌──────────────────────────────────────────────────────────────────┐ │ ← Volver TÉCNICO DE HACIENDA — AEAT 2026 (turno libre) │ │ [🔔][⭐][🗑] │ │ │ │ 446 plazas autorizadas · A2 · Categoría: hacienda │ │ Categoría temática: Hacienda y gestión tributaria │ │ │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ TIMELINE │ │ │ │ ✅ 1. OEP 07-may-2026 │ │ BOE núm. 111 · RD 387/2026 │ │ Plazas: 410 libre + 36 discapacidad │ │ [Ver PDF →] │ │ │ │ ⏳ 2. Convocatoria y bases ESTIMADO: ago–oct 2026│ │ Tiempo medio histórico: 3–6 meses tras OEP │ │ [🔔 Avisarme cuando salgan] │ │ │ │ ○ 3. Presentación de solicitudes PENDIENTE │ │ ○ 4. Lista provisional admitidos PENDIENTE │ │ ○ 5. Lista definitiva admitidos PENDIENTE │ │ ○ 6. Fecha/lugar examen PENDIENTE │ │ ○ 7. Desarrollo de ejercicios PENDIENTE │ │ ○ 8. Resultados PENDIENTE │ │ ○ 9. Relación de aprobados PENDIENTE │ │ ○ 10. Nombramiento y toma posesión PENDIENTE │ │ │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ TEMARIO (solo aparece cuando hay bases) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Estado: pendiente de publicación │ │ │ │ Último temario conocido: 2024 (60 temas) │ │ │ │ [Ver temario 2024] │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ │ ACTIVIDAD RECIENTE │ │ • 07-may OEP publicada en BOE │ │ • 04-may Mesa General de Negociación AGE │ └──────────────────────────────────────────────────────────────────┘ ``` Botones de la cabecera: - 🔔 Suscribirse a este proceso (notificación inmediata cuando cambie fase) - ⭐ Marcar como favorito - 🗑 Silenciar (no aparecer en email diario) Si el proceso está en fase 2 o posterior, aparece un bloque adicional con el **temario extraído**: ``` TEMARIO (66 temas) [📥 Descargar TXT] [📊 Diff vs anterior] Parte general (16 temas): 1. La Constitución Española de 1978... 2. El Tribunal Constitucional... ... Parte específica (50 temas): 1. Procedimiento administrativo común... 2. Ley General Tributaria... ... ``` Y si hay diff calculado, un bloque destacado: ``` 🔀 CAMBIOS RESPECTO A LA CONVOCATORIA ANTERIOR (2024) ➕ 4 temas nuevos [Ver detalle] ➖ 2 temas eliminados 🔀 8 temas reformulados (similitud 70–95%) ✅ 52 temas idénticos Porcentaje de cambio: 17.5% ``` ### 2.3 Listado de procesos (`/procesos`) Tabla filtrable y ordenable: ``` ┌──────────────────────────────────────────────────────────────────┐ │ PROCESOS [+ Suscribir a otro proceso] │ │ │ │ Filtros: [Categoría ▼] [Estado ▼] [Administración ▼] [Año ▼] │ │ 🔍 [____________] │ │ │ │ ▼ ORDENAR POR: Fase actual ▲ │ │ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Cuerpo │ Admin │ Estado │ Última │ │ │ ├──────────────────────────────────────────────────────────────┤ │ │ │ Inspector Hac. │ AEAT │ Bases publicad. │ 04-may │ │ │ │ Técnico Hac. │ AEAT │ OEP publicada │ 07-may │ │ │ │ TAG │ Ayto Madrid │ Bases publicad. │ 11-may │ │ │ │ Auxiliar AGE │ AGE │ Plazo abierto │ 09-may │ │ │ │ Enfermería │ INGESA │ OEP publicada │ 07-may │ │ │ │ ... │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ [← Página 1 de 4 →] │ └──────────────────────────────────────────────────────────────────┘ ``` Click en una fila → detalle de proceso. Botón "Suscribir a otro proceso" permite buscar por administración+cuerpo y añadir uno que el sistema ya conoce pero el usuario no estaba siguiendo. ### 2.4 Calendario (`/calendario`) Vista mensual con todas las fechas clave de los procesos seguidos: ``` ┌──────────────────────────────────────────────────────────────────┐ │ CALENDARIO ← Junio 2026 → [Mes][Semana] [📥 Suscribir] │ │ │ │ Lu Ma Mi Ju Vi Sa Do │ │ 1 2 3 4 5 6 7 │ │ 🟠 │ │ Fin plazo │ │ Inspect. │ │ │ │ 8 9 10 11 12 13 14 │ │ │ │ 15 16 17 18 19 20 21 │ │ 🔴 │ │ Examen │ │ TAG │ │ │ │ 22 23 24 25 26 27 28 │ │ 🟣 │ │ Lista def. │ │ Tec. Hac. │ │ │ │ 29 30 │ └──────────────────────────────────────────────────────────────────┘ ``` Botón "Suscribir" → genera URL única `https://buscador.example/ical/ {token}.ics` que el usuario añade a Google Calendar, Outlook o Apple Calendar para sincronización automática. ### 2.5 Temarios (`/temarios`) Histórico de temarios extraídos, con diffs: ``` ┌──────────────────────────────────────────────────────────────────┐ │ TEMARIOS HISTÓRICOS [Filtrar por cuerpo ▼] │ │ │ │ Cuerpo: Inspector Hacienda — AEAT │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Año │ Plazas │ # Temas │ Cambio │ Acciones │ │ │ ├──────────────────────────────────────────────────────────────┤ │ │ │ 2026 │ 130 │ 66 │ +17.5% │ [Ver] [Diff vs 2024] │ │ │ │ 2024 │ 120 │ 64 │ +2.1% │ [Ver] [Diff vs 2022] │ │ │ │ 2022 │ 110 │ 63 │ -- │ [Ver] │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ Cuerpo: TAG — Ayuntamiento de Madrid │ │ ... │ └──────────────────────────────────────────────────────────────────┘ ``` Detalle de un temario (`/temarios/{id_temario}`) muestra la lista completa de temas con buscador interno, y el diff lado a lado si hay uno anterior. ### 2.6 Alertas y propuestas (`/alertas`) Cola de cosas pendientes para el usuario: ``` ┌──────────────────────────────────────────────────────────────────┐ │ ALERTAS Y PROPUESTAS │ │ │ │ 🔔 NOTIFICACIONES SIN LEER (3) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ 🟢 Bases TAG Madrid publicadas hace 2 horas │ │ │ │ 🟠 Fin plazo Inspector Hacienda en 3 días │ │ │ │ 🟣 Diff temario Auxiliar AGE >25% hace 6 horas │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ 💡 PROPUESTAS DEL SISTEMA (5) — solo para admins │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Regla nueva sugerida: │ │ │ │ "comisión valoración" + cuerpo deportiv → BAJA │ │ │ │ Habría evitado 47 FP esta semana sin tocar TP. │ │ │ │ [✓ Aplicar] [✗ Rechazar] [Ver detalle] │ │ │ ├──────────────────────────────────────────────────────────────┤ │ │ │ Patrón candidato: │ │ │ │ "técnico de administración electrónica" │ │ │ │ Apareció en 6 TP del último mes sin patrón directo. │ │ │ │ [✓ Aplicar] [✗ Rechazar] [Ver detalle] │ │ │ └──────────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────────┘ ``` ### 2.7 Preferencias (`/preferencias`) Configuración del usuario. Tres pestañas: **Canales**: - Email diario: activado / desactivado, hora de envío. - Email inmediato: activado / desactivado, qué fases (10 checkboxes), límite máximo por hora/día. - Push web: activado, permisos del navegador. - SMS (opcional, de pago): activado, teléfono. - Calendario iCal: activado, URL de suscripción con botón "copiar", qué tipos de fecha incluir. **Categorías**: lista de categorías a las que está suscrito, opción de añadir/quitar. **Procesos**: lista de procesos seguidos directamente, con opción de quitar la suscripción. **Reglas avanzadas** (solo para admin/dirección de academia): editor YAML para crear reglas configurables tipo `condicion + accion`. ### 2.8 Métricas (`/metricas`) — solo para academia_direccion Dashboard de métricas del sistema: - Procesos activos por estado (gráfico). - Procesos por categoría temática (top 10). - Tiempo medio entre fases (histograma). - Tasa de TP/FP del último mes por categoría. - Aperturas y clics del email diario. - Inscripción esperada / real en cursos vinculados a procesos. --- ## 3. Endpoints API mínimos Todos los endpoints requieren autenticación. Devuelven JSON. ``` GET /api/procesos → listado de procesos del usuario GET /api/procesos/{id} → detalle del proceso POST /api/procesos/{id}/suscribir → suscribirse a un proceso POST /api/procesos/{id}/silenciar → silenciar un proceso GET /api/procesos/{id}/eventos → eventos del proceso GET /api/procesos/{id}/temario → temario extraído GET /api/procesos/{id}/diff → diff con anterior GET /api/alertas → alertas no leídas POST /api/alertas/{id}/marcar_leida POST /api/alertas/{id}/silenciar GET /api/calendario → fechas clave del usuario GET /ical/{token}.ics → calendario .ics suscriptible (público con token) GET /api/temarios → histórico filtrable GET /api/temarios/{id} → temario completo GET /api/diff/{id_anterior}/{id_nuevo} → diff entre dos temarios GET /api/preferencias → configuración del usuario POST /api/preferencias → actualizar configuración GET /api/propuestas → cola de propuestas del sistema (admin) POST /api/propuestas/{id}/aprobar POST /api/propuestas/{id}/rechazar POST /feedback → endpoint público de los botones del email (no requiere auth, usa hit_id firmado) ``` --- ## 4. Consideraciones de implementación ### 4.1 Carga de datos en tiempo real El dashboard puede usar **server-sent events (SSE)** o polling cada 30s para alertas en tiempo real. WebSockets son overkill — los datos cambian del orden de minutos, no de segundos. ### 4.2 Caché agresiva Vistas como `/procesos`, `/calendario`, `/temarios` son consultas relativamente caras pero datos que cambian poco. Cachear en Redis con TTL de 5-10 minutos. ### 4.3 Estado de "alertas no leídas" Cada notificación tiene `fecha_apertura` en `notificaciones_enviadas`. Cuando el usuario entra al dashboard, las alertas listadas se marcan como leídas automáticamente. ### 4.4 Permisos por organización Si la academia tiene varios usuarios en la misma organización: - Las suscripciones a procesos son **personales**. - Las reglas pueden ser personales o de organización. - Las métricas son visibles para todos los usuarios de la organización. - Los temarios extraídos son visibles para todos. ### 4.5 Responsive El dashboard debe funcionar en móvil. La timeline de proceso (sección 2.2) es la más complicada — en móvil, las fases se apilan verticalmente sin pierde la legibilidad. ### 4.6 Accesibilidad Cumplir WCAG 2.1 AA. Especialmente importante: - Contraste de los colores de fase (10 colores distintos). - Navegación por teclado en la timeline. - Iconos siempre con texto alternativo (los emojis pueden no leerse bien con lectores de pantalla). --- ## 5. MVP mínimo viable Si hay que priorizar para lanzar pronto: **Sprint 1 (1-2 semanas)**: - Login y permisos básicos. - Pantalla de inicio (`/`). - Detalle de proceso (`/procesos/{id}`) sin temario. - Alertas (`/alertas`). **Sprint 2 (1-2 semanas)**: - Listado de procesos (`/procesos`). - Calendario (`/calendario`) + endpoint `.ics`. - Preferencias (`/preferencias`) — solo canales. **Sprint 3 (2-3 semanas)**: - Temarios y diffs. - Métricas para academia. - Reglas avanzadas (YAML). - Cola de propuestas del sistema. Con sprints 1 y 2 ya tienes una herramienta utilizable. El sprint 3 es lo que la diferencia de cualquier servicio de notificaciones de oposiciones del mercado.