Dashboard DIRCOM — Dirección de Comunicaciones UFRO

Panel de gestión de tareas por coordinación. Frontend estático en HTML/CSS/JS, datos en Supabase a través de una función serverless de Vercel (las credenciales nunca llegan al navegador).

Estructura

dircom-dashboard/
├── index.html                 Estructura de la página (barra lateral, contenedores) y carga de scripts
├── manual-dircom.html         Manual de usuario
├── css/
│   └── styles.css             Estilos
├── img/
│   └── favicon.webp
├── js/
│   ├── config.js              Paleta de colores y campos del sistema
│   ├── state.js               Estado global y permisos en pantalla
│   ├── utils.js               Utilidades (fechas, colores, etiquetas, avisos)
│   ├── api.js                 Llamadas a /api/data y normalización de datos
│   ├── metricas.js            Cálculo de KPI por período (fechas, agregados, comparación)
│   ├── components/
│   │   ├── listas.js          Listas de tareas y personas
│   │   ├── modales.js         Formularios y detalle de tarea
│   │   ├── buscador.js        Buscador de la barra lateral
│   │   └── tablas.js          Indicadores y tablas de reporte (pantalla y PDF)
│   ├── views/                 Una vista por archivo
│   │   ├── dashboard.js
│   │   ├── tareas.js
│   │   ├── personas.js
│   │   ├── coordinaciones.js
│   │   ├── calendario.js
│   │   ├── reportes.js
│   │   ├── opciones.js
│   │   └── papelera.js
│   ├── reporte.js             Reporte de gestión imprimible / PDF
│   ├── exportar.js            Exportación a Excel (CSV)
│   ├── acciones.js            Crear, editar, cambiar estado y eliminar
│   ├── app.js                 Navegación y render principal
│   └── main.js                Arranque y actualización automática
├── api/
│   ├── data.js                Función serverless de Vercel (intermediario con Supabase)
│   └── keepalive.js           Cron diario que consulta Supabase para que no se pause
└── vercel.json

Los archivos de js/ son scripts clásicos (no módulos ES): comparten el ámbito global para que los onclick="..." del HTML generado encuentren las funciones. El orden de los <script> en index.html importa: main.js va al final porque es el que arranca la aplicación.

Configuración (Vercel)

Variables de entorno necesarias para api/data.js:

Variable	Descripción
SUPABASE_URL	URL del proyecto Supabase
SUPABASE_SERVICE_KEY	Service role key de Supabase (secreta)
SESION_SECRETO	Firma las sesiones de Google (secreta). Sin ella no se puede entrar con Google
DIRECTORA_CORREO	Correos @ufrontera.cl con acceso total (Administración), separados por coma. Se revisa en cada petición
CRON_SECRET	Opcional: protege /api/keepalive para que solo lo llame el cron
CORREO_USUARIO	Opcional: cuenta @ufrontera.cl que envía los avisos por correo (Gmail SMTP). Sin ella y CORREO_CLAVE no se envían correos
CORREO_CLAVE	Contraseña de aplicación de Google de esa cuenta (secreta)
VER_COMO_CORREO	Opcional: correos que pueden usar "👁 Ver como…" (ver el dashboard como otra persona de Equipo, en solo lectura), separados por coma
CORREO_PRUEBA	Opcional, solo para probar: todos los correos van a esta dirección y la app muestra el resultado del envío. No usar en Production

El plan gratuito de Supabase pausa el proyecto tras 7 días sin actividad. Para evitarlo, vercel.json programa un cron diario (12:00 UTC) que llama a /api/keepalive, que hace una consulta mínima a coordinaciones. Los crons solo corren en el despliegue de producción (main).

Tablas usadas en Supabase: coordinaciones, personas, tareas, opciones.

Desde v2.3.0 la tabla tareas necesita la columna completed_at (fecha de término), que api/data.js fija al marcar una tarea como completada y borra si se reabre:

alter table tareas add column if not exists completed_at timestamptz;

Desde v2.6.0 también necesita asignado_por y asignado_at: el servidor registra quién creó o reasignó cada tarea (directora, coord:<id> o general) y cuándo. Con eso, el enlace de cada coordinación muestra las tareas que la directora le creó o asignó desde la última visita:

alter table tareas add column if not exists asignado_por text;
alter table tareas add column if not exists asignado_at timestamptz;

Desde v2.7.0 (login con Google) la tabla personas necesita el correo de cada persona y el permiso "Gestiona tareas". asignado_por puede valer además persona:<id>:

alter table personas add column if not exists correo text;
create unique index if not exists personas_correo_unico on personas (lower(correo));
alter table personas add column if not exists gestiona_tareas boolean not null default false;

Desde v2.8.0 los avisos 🔔 salen de la tabla eventos (creada, asignada, fecha, revision), que llena el servidor; el "visto" de cada persona queda en personas.visto_at:

create table eventos (
  id bigint generated always as identity primary key,
  created_at timestamptz not null default now(),
  tipo text not null, tarea_id text not null, coord_id text, para text,
  actor_id text, actor_rol text, actor_nombre text
);
create index eventos_created_at on eventos (created_at desc);
alter table eventos enable row level security;
alter table personas add column visto_at timestamptz;

Desde v2.12.0 el permiso "Gestiona tareas de su coordinación":

alter table personas add column if not exists gestiona_coord boolean not null default false;

Reportes

Vista 📈 Reportes: período configurable (atajos o fechas desde/hasta), filtro por coordinación y comparación con el período anterior de igual duración.

Indicador	Cálculo
Creadas / Completadas	Tareas cuya fecha de creación / de término cae en el período
Pendientes / Vencidas al cierre	Estado al último día del período
Tiempo de resolución	Días entre creación y término (promedio y mediana)
Cumplimiento de plazos	Completadas en o antes de su fecha límite ÷ completadas con fecha límite

Desglose por persona, coordinación, tipo de requerimiento, categoría y solicitante. Salidas: PDF (ventana de impresión) y Excel (CSV) con el detalle de cada tarea y columnas Sí/No para filtrar o armar tablas dinámicas. Las tareas en la papelera no se consideran.

Desarrollo local

La interfaz se puede abrir directamente, pero los datos vienen de /api/data, que solo existe cuando corre Vercel. Para probar con datos reales:

npm i -g vercel
vercel link        # vincular con el proyecto existente
vercel env pull    # descargar las variables de entorno
vercel dev         # http://localhost:3000

Vistas por rol

Login con Google (https://<dominio>/ → "Iniciar sesión con Google", solo cuentas @ufrontera.cl). api/data.js verifica el token de Google, busca a la persona por personas.correo y entrega una sesión firmada de 30 días. El rol se vuelve a calcular en cada petición:

Rol	Cómo se define	Puede
Administración (directora)	Correo en DIRECTORA_CORREO	Todo
Gestiona tareas (gestor)	personas.gestiona_tareas	Crear y modificar tareas de todas las coordinaciones
Coordinador/a (coordinador)	personas.es_jefe	Todo con las tareas de su coordinación; nombre y cargo de su equipo
Gestiona tareas de su coordinación (gestorCoord)	personas.gestiona_coord	Crear y modificar tareas de su coordinación (como el coordinador/a, sin editar personas ni recibir los avisos de Revisión)
Integrante (integrante)	Resto	En sus tareas abiertas: estado hasta Revisión, descripción y link

Personas, permisos, correos, coordinaciones y opciones solo los modifica Administración. Los permisos se comprueban en el servidor (denegar()); la interfaz solo oculta los botones.

Sin sesión, la API responde 401 y no entrega datos: la app muestra la pantalla de login sobre un tablero de muestra desenfocado. Desde v2.10.0 no hay otra forma de entrar (se retiraron el enlace ?k= y los enlaces por coordinación ?coord=).

Historial de versiones

• v2.12.1 — Imagen y Diseño y Marketing intercambian su color; se quita el aviso de tareas sin fecha de término (las tareas anteriores al lanzamiento se borraron)
• v2.12.0 — Permiso "Gestiona tareas de su coordinación" (personas.gestiona_coord, rol gestorCoord): crea, edita, completa y archiva tareas solo de su coordinación; su coordinador/a recibe aviso 🔔 y correo de lo que crea, asigna o cambia de fecha
• v2.11.0 — Calendario de toda la Dirección para coordinadores/as: getAll les entrega aparte (calendario) las tareas con fecha de las demás coordinaciones, solo para el calendario y sin poder editarlas; integrantes ven solo su calendario. "👁 Ver como…" para los correos de VER_COMO_CORREO: el servidor arma la vista de otra persona y rechaza cualquier cambio mientras está activo
• v2.10.0 — Solo se entra con Google: se retiran el enlace de Administración ?k= (DIRECTORA_KEY), los enlaces antiguos y las variables ENLACES_SOLO_LECTURA y SOLO_CON_GOOGLE
• v2.9.0 — Avisos por correo con las mismas reglas que los avisos 🔔 (botón "Ver en dashboard", modo prueba con CORREO_PRUEBA); aviso cuando cambia la fecha límite; la fecha límite ya no se muestra un día antes ni vence antes de tiempo
• v2.8.0 — Avisos 🔔 por persona: asignaciones (a la persona asignada y, si viene de Administración o de quien gestiona tareas, a su coordinador/a), tareas que pasan a Revisión (al coordinador/a) y tareas creadas por otras personas (a Administración); el "visto" se guarda en el servidor
• v2.7.0 — Login con Google (@ufrontera.cl) y permisos por persona aplicados en el servidor (Integrante, Gestiona tareas, Coordinador/a, Administración); pantalla de login sobre un tablero desenfocado (SOLO_CON_GOOGLE); la vista de la directora pasa a llamarse Administración; nombre "DirCom"
• v2.6.0 — Avisos para cada coordinación: tareas creadas o asignadas por la directora desde la última visita (aviso, etiqueta "Nueva" y contador en la pestaña); Equipo con tareas por persona
• v2.4.0 — Vista de la directora protegida con clave; Reportes solo para la directora; cada coordinación recibe solo sus tareas
• v2.3.0 — Vista Reportes: período configurable, KPI, comparación, PDF y exportación a Excel; registro de fecha de término
• v2.2.0 — Código separado en archivos (css/, js/, img/), sin cambios de funcionalidad
• v2.1.2 — Celdas del calendario con tamaño fijo
• v2.1.1 — Favicon