# Dashboard — Secciones nuevas: enlaces externos y notas Entrega 6 del proyecto. Complementa la especificación general del dashboard (`09_dashboard_especificacion.md`) con las dos pestañas nuevas que aparecen en el detalle de cada proceso: **Enlaces monitorizados** e **Información manual**. --- ## 1. Dónde encajan en la navegación Estas secciones viven dentro de la pantalla **Detalle de proceso** (ruta `/procesos/{id_proceso}` en la especificación del dashboard). Hasta ahora esa pantalla mostraba: - Cabecera con nombre del proceso + acciones (notificar, favorito). - Timeline de las 10 fases. - Datos estructurados (plazas, ejercicios, tasa). - Temario y diff con anterior. - Actividad reciente. Se añaden dos secciones **plegables** debajo de la actividad reciente: ``` ┌────────────────────────────────────────────────────────────┐ │ TIMELINE · DATOS · TEMARIO · ACTIVIDAD │ │ ───────────────────────────────────────────── │ │ ▼ ENLACES MONITORIZADOS (3) + Añadir enlace │ │ ───────────────────────────────────────────── │ │ ▼ INFORMACIÓN MANUAL (8 notas · 2 pendientes) │ └────────────────────────────────────────────────────────────┘ ``` Plegadas por defecto si están vacías; expandidas si hay contenido. --- ## 2. Sección "Enlaces monitorizados" ### 2.1 Vista de tabla Lista las URLs registradas para el proceso. Estructura: ``` ENLACES MONITORIZADOS + Añadir enlace ┌─────────────┬──────────────┬─────────────┬─────────────┬──────────┐ │ Tipo │ URL │ Frecuencia │ Último camb.│ Estado │ ├─────────────┼──────────────┼─────────────┼─────────────┼──────────┤ │ Tablón │ sede.aeat... │ Auto (4h) │ hace 2h │ ✓ activo │ │ Web proceso │ madrid.es... │ Manual 1h │ hace 6 días │ ✓ activo │ │ Tribunal │ upm.es/... │ Auto (24h) │ — │ ✓ activo │ └─────────────┴──────────────┴─────────────┴─────────────┴──────────┘ 3 archivos detectados aún sin procesar → Ver detalle ``` Por cada fila: - **Tipo**: pill con color suave según el tipo (tablon_electronico, sede_electronica, web_proceso, web_tribunal, otra). - **URL**: la URL con favicon del dominio y posibilidad de copiar. Truncada si es muy larga; tooltip con la URL completa. - **Frecuencia**: si es `frecuencia_auto=true` muestra "Auto (Xh)"; si es manual muestra el valor configurado. - **Último cambio**: tiempo relativo desde el último cambio detectado, o "—" si nunca cambió. - **Estado**: pill verde "activo" si va bien, ámbar "sin cambios recientes" si lleva > X días igual, rojo "error" si la última comprobación falló (con tooltip explicando el error). Acciones por fila (icono `⋯` al final): - Comprobar ahora (dispara chequeo inmediato, sin esperar a la próxima ventana). - Ver historial de snapshots (lista de capturas con fechas y diferencias). - Editar (cambiar URL, descripción, frecuencia). - Pausar / Reanudar. - Eliminar. ### 2.2 Modal "Añadir enlace" ``` ┌─────────────────────────────────────────────────┐ │ Añadir enlace monitorizado ✕ │ │ ─────────────────────────────────────────────── │ │ │ │ Tipo de enlace │ │ ◯ Tablón electrónico │ │ ◉ Sede electrónica │ │ ◯ Web del proceso │ │ ◯ Web del tribunal │ │ ◯ Otra │ │ │ │ URL │ │ ┌─────────────────────────────────────────┐ │ │ │ https://sede.aeat.gob.es/... │ │ │ └─────────────────────────────────────────┘ │ │ │ │ Descripción (opcional) │ │ ┌─────────────────────────────────────────┐ │ │ │ Página oficial del proceso TAG Madrid │ │ │ └─────────────────────────────────────────┘ │ │ │ │ Frecuencia de chequeo │ │ ◉ Automática según fase (recomendado) │ │ ◯ Cada [ 60 ] minutos │ │ │ │ ☐ Comprobar ahora al guardar │ │ │ │ [ Cancelar ] [ Guardar enlace ] │ └─────────────────────────────────────────────────┘ ``` Validación al guardar: - La URL debe ser válida (parseable, esquema http/https). - Si ya existe la misma URL para este proceso, error. - Test rápido: hacer HEAD a la URL para verificar que responde. Si devuelve 4xx o 5xx, avisar pero permitir guardar igualmente (puede ser temporal). - Verificar robots.txt del dominio. Si lo prohíbe, avisar y guardar el enlace como inactivo. ### 2.3 Banner "Archivos detectados sin procesar" Cuando hay archivos en `archivos_detectados` con `requiere_revision = TRUE` o procesados con resultados inciertos, aparece un banner al final de la sección: ``` ⚠ 3 archivos detectados que requieren revisión ┌──────────────────────────────────────────────────────────┐ │ resolucion_lista_provisional_2026.pdf │ │ Detectado: hace 4h · Descargado · Sin clasificar │ │ [Abrir PDF] [Clasificar manualmente] [Descartar] │ ├──────────────────────────────────────────────────────────┤ │ anexo_correcciones.docx │ │ Detectado: hace 2d · Descargado · Posible corrección │ │ [Abrir] [Confirmar fase] [Descartar] │ └──────────────────────────────────────────────────────────┘ ``` El responsable de contenidos hace clic, confirma o ajusta la clasificación, y eso retroalimenta el motor (lo veremos en el bucle de mejora continua). ### 2.4 Historial de snapshots Modal accesible desde la acción "Ver historial": ``` HISTORIAL DE SNAPSHOTS · sede.aeat.gob.es/... ───────────────────────────────────────────── 11-may 14:32 → Cambio detectado · 1 archivo nuevo · "resolucion_lista_provisional_2026.pdf" · 4.230 palabras (+218, -45) 09-may 10:15 → Cambio detectado · sin archivos nuevos · 4.057 palabras (+12, -3) · Diff: cambios menores en texto introductorio 07-may 09:00 → Primera captura · 4.048 palabras · 0 archivos detectados ``` --- ## 3. Sección "Información manual" ### 3.1 Tres pestañas internas ``` INFORMACIÓN MANUAL [Notas (5)] [Pendientes (2)] [Contactos (3)] + Añadir ``` ### 3.2 Pestaña "Notas" Listado cronológico inverso de notas tipo `nota` y `observacion`. Cada nota muestra: ``` ┌──────────────────────────────────────────────────────────────┐ │ Camila Juárez · hace 2 días · 🏷 riesgo-temario │ │ │ │ Ojo: el alumno de la promoción anterior comentó que el │ │ tema 14 está totalmente reescrito respecto al año pasado. │ │ Verificar con el diff cuando salga oficial. │ │ │ │ [Editar] [Borrar] │ └──────────────────────────────────────────────────────────────┘ ``` Markdown ligero soportado (negrita, cursiva, listas, enlaces). Si la nota tiene etiquetas, aparecen como pills al lado del autor. Filtros arriba: por autor, por etiqueta, por rango de fechas. ### 3.3 Pestaña "Pendientes" Listado de tareas pendientes. Orden: las que tienen fecha límite más próxima primero, luego las que no tienen fecha. Las completadas aparecen al final con tachado. ``` ☐ Actualizar materiales del tema 12 (cambió referencia legal) Asignado a: Adrià Juan · Vence: en 5 días · 🔴 prioridad alta ☐ Confirmar disponibilidad de aulas con secretaría Asignado a: Sandra Vélez · Sin fecha ☐ Pedir feedback a alumnos sobre temas reformulados Asignado a: Camila Juárez · Sin fecha ──────────────────────────────────────────────────────────────── COMPLETADOS (vista plegada por defecto) ✓̶ Verificar fecha de publicación del temario nuevo (hace 6 días) ``` Acciones rápidas en cada pendiente: - Marcar como completado (checkbox). - Editar (cambiar asignado, fecha, contenido). - Eliminar. ### 3.4 Pestaña "Contactos" Tarjetas con datos de contacto vinculados al proceso: ``` ┌──────────────────────────────────────────────┐ │ Carmen López Ruiz │ │ Presidenta del tribunal │ │ ✉ carmen.lopez@madrid.es │ │ 📞 91 123 45 67 │ │ 🏢 Ayuntamiento de Madrid │ │ [Editar] [✕] │ └──────────────────────────────────────────────┘ ``` ### 3.5 Sección plegable "Adjuntos manuales" Al final de la sección de información manual, lista de archivos subidos manualmente al proceso (PDFs que llegaron por otra vía, documentos compartidos por alumnos, etc.): ``` ADJUNTOS MANUALES (4) + Subir archivo 📄 bases_oficiosas_2026.pdf 2.1 MB Subido por Jorge López · hace 9 días "Bases preliminares filtradas antes de publicación" [Descargar] [Procesar como bases] [Eliminar] 📄 temario_oposicion_alumnos.pdf 890 KB ... ``` Cada adjunto tiene la opción "Procesar como bases" que dispara el parser igual que si viniera del watcher (útil cuando alguien tiene el PDF antes de que aparezca oficialmente). --- ## 4. Vista global de pendientes (sidebar) Además de ver pendientes dentro de un proceso, el usuario tiene una **vista global** de todos sus pendientes en todos los procesos. Accesible desde el sidebar: ``` SIDEBAR (modificación): ⌂ Inicio ▦ Procesos ◫ Calendario ≡ Temarios ! Alertas ✓ Mis pendientes (2) ← nuevo ⚙ Preferencias ⟐ Reglas ``` Pantalla `/pendientes`: ``` MIS PENDIENTES [Todos] [Mis pendientes] [De mi equipo] VENCEN PRONTO ☐ Actualizar materiales tema 12 · TAG Madrid 2026 · Vence en 5d ☐ Confirmar disponibilidad aulas · Inspector Hac. · Vence en 12d SIN FECHA ☐ Pedir feedback alumnos · Auxiliar AGE 2026 ☐ Revisar tribunal nuevo · Letrados Justicia COMPLETADOS RECIENTES ✓̶ Verificar fecha temario · TAG Madrid 2026 · hace 6d ``` --- ## 5. Wireframe completo del detalle de proceso (actualizado) Para ver cómo queda toda la pantalla con las secciones nuevas: ``` ┌─────────────────────────────────────────────────────────────────────┐ │ ← Procesos / TAG Madrid 2026 │ │ │ │ TÉCNICO DE ADMINISTRACIÓN GENERAL — Ayto. Madrid │ │ 15 plazas · A1 · 2026 · Turno libre [🔔][⭐][+ etiqueta][⋯] │ │ │ │ 🏷 curso-abierto · 🏷 prioridad-alta · 🏷 riesgo-temario │ │ ─────────────────────────────────────────────────────────────────── │ │ │ │ ▼ CICLO DE VIDA DEL PROCESO │ │ [10 fases con timeline] │ │ │ │ ▼ DATOS DE LA CONVOCATORIA │ │ [plazas, ejercicios, tasa, sistema selectivo] │ │ │ │ ▼ TEMARIO Y DIFF │ │ [diff stats + lista de cambios] │ │ │ │ ▶ ACTIVIDAD RECIENTE │ │ │ │ ▼ ENLACES MONITORIZADOS (3) + Añadir enlace │ │ [tabla de enlaces + banner de archivos pendientes] │ │ │ │ ▼ INFORMACIÓN MANUAL (5 notas · 2 pendientes · 3 contactos) │ │ [pestañas: Notas / Pendientes / Contactos] │ │ [adjuntos manuales al final] │ └─────────────────────────────────────────────────────────────────────┘ ``` --- ## 6. Endpoints API necesarios Se añaden a los del documento `09_dashboard_especificacion.md`: ``` # Enlaces externos GET /api/procesos/{id}/enlaces lista de enlaces POST /api/procesos/{id}/enlaces añadir enlace PUT /api/enlaces/{id_enlace} editar enlace POST /api/enlaces/{id_enlace}/comprobar forzar comprobación DELETE /api/enlaces/{id_enlace} eliminar enlace GET /api/enlaces/{id_enlace}/snapshots historial # Archivos detectados GET /api/procesos/{id}/archivos-detectados listar POST /api/archivos/{id}/clasificar clasificar manualmente POST /api/archivos/{id}/descartar marcar para no procesar GET /api/archivos/{id}/descargar descargar a local # Notas GET /api/procesos/{id}/notas filtrable por tipo POST /api/procesos/{id}/notas crear (tipo: nota, pendiente, contacto, observacion) PUT /api/notas/{id_nota} editar POST /api/notas/{id_nota}/completar marcar pendiente hecho DELETE /api/notas/{id_nota} eliminar # Etiquetas POST /api/procesos/{id}/etiquetas añadir etiqueta DELETE /api/etiquetas/{id_etiqueta} quitar etiqueta GET /api/etiquetas todas las del usuario u org (autocompletado) # Adjuntos manuales GET /api/procesos/{id}/adjuntos listar POST /api/procesos/{id}/adjuntos subir archivo POST /api/adjuntos/{id}/procesar disparar parser DELETE /api/adjuntos/{id} eliminar # Vista global de pendientes GET /api/pendientes todos los míos GET /api/pendientes/equipo los de mi organización ``` --- ## 7. Permisos y visibilidad - **Notas privadas**: solo las ve el autor. Útil para apuntes personales del comercial o del responsable de contenidos. - **Notas de organización**: las ve cualquier usuario de la misma `organizacion` (campo de la tabla `usuarios`). El opositor individual no las ve aunque siga el mismo proceso. - **Pendientes**: visibles para el autor y para el asignado. La `vista global` de pendientes del sidebar solo muestra los que el usuario tiene asignados. - **Contactos**: por defecto son de organización (es información comercial sensible). Pueden marcarse como privados. - **Adjuntos manuales**: por defecto de organización. Pueden marcarse como privados. - **Etiquetas**: pueden ser personales (las ve solo el creador) o de organización. El opositor individual (rol `opositor_individual`) suscrito al proceso ve la información de enlaces (lectura) pero **no puede** añadir enlaces ni notas. Solo lectura y comentarios propios. --- ## 8. Consideraciones de UX ### 8.1 Carga progresiva Las secciones "Enlaces" e "Información manual" se cargan por AJAX al expandirlas, no en la carga inicial de la pantalla. Así el detalle del proceso es rápido incluso si tiene muchas notas e historial. ### 8.2 Notificación visual de cambios Cuando un enlace cambia desde la última vez que el usuario abrió el proceso, aparece un indicador visual: ``` ▼ ENLACES MONITORIZADOS (3) · 🔴 1 cambio nuevo ``` Al expandir, el enlace que cambió aparece destacado. ### 8.3 Búsqueda dentro del proceso Caja de búsqueda en la pestaña "Información manual" que busca en texto completo de notas, pendientes y contactos del proceso usando los índices `tsv` de PostgreSQL. ### 8.4 Móvil En móvil, las secciones nuevas se apilan verticalmente como el resto. La tabla de enlaces se convierte en lista de tarjetas. Los pendientes mantienen el checkbox grande para tap fácil. --- ## 9. Métricas a vigilar - **Adopción de enlaces externos**: número medio de enlaces por proceso activo. Objetivo: > 1 en procesos en fase ≥ 3. - **Tasa de archivos clasificados correctamente**: archivos detectados que no requieren revisión manual / total. Objetivo: > 70 %. - **Tiempo medio entre archivo nuevo en tablón y notificación enviada**: objetivo < 1 hora para tablones con frecuencia 1-2h. - **Notas y pendientes por proceso**: indicador de adopción del equipo. - **Búsquedas en información manual por semana**: indica que la gente consulta lo que el equipo ha escrito (es información útil) o no (probablemente nadie lee, conviene replantear).