Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Pierrot-01/Hackathon_epis_2026/llms.txt

Use this file to discover all available pages before exploring further.

The reports page is designed for directors and coordinators who need a broad, at-a-glance view of academic risk across the entire student cohort. It combines a live summary stats strip, an interactive horizontal bar chart for risk distribution, and a full sortable student listing — all sourced in real time from the backend’s classification engine.

​
URL

http://localhost:8000/reportes.html

​
Data Loading

On page load, the reports page makes two parallel requests: 
const [estudiantesResp, statsResp] = await Promise.all([
    fetch(`${API_BASE}/api/estudiantes`),
    fetch(`${API_BASE}/api/stats`),
]);
EndpointUsed For
GET /api/estudiantesFull student listing with nombre, id, grado, nivel_riesgo, motivos, origen_ia
GET /api/statsAggregate counts and percentages: total, alto, medio, bajo, insuficiente, pct_alto, pct_medio, pct_bajo
An “Actualizar Datos” button in the top navbar bar manually re-triggers cargarReportes(), spinning the refresh icon while the request is in flight. If the backend is unreachable, the stats grid renders a cloud_off error state with a “Reintentar” button.

​
Information Banner

At the top of the content area, an informational banner clarifies the data source:
Datos Procesados por Motor de Reglas (Art. III) Las clasificaciones son deterministas y auditables. El porcentaje se calcula sobre el total de estudiantes activos en el dataset.
All risk classifications on this page come from the same deterministic rules engine used throughout the system — not from AI inference. The origen_ia field indicates AI participation separately in the full student listing.

​
Summary Stats Strip

Four stat cards render across a responsive grid (2 columns on mobile, 4 on desktop):

Total

Total number of active students in the dataset. Sourced from stats.total.

Alto 🔴

Count of high-risk students with percentage in parentheses. Left border accent in risk-high red. Sourced from stats.alto and stats.pct_alto.

Medio 🟡

Count and percentage of medium-risk students. Left border in risk-medium amber. Sourced from stats.medio and stats.pct_medio.

Bajo 🟢

Count and percentage of low-risk students. Left border in risk-low green. Sourced from stats.bajo and stats.pct_bajo.

​
Risk Distribution Bars

The “Distribución de Riesgo por Estudiante” section renders one horizontal bar per risk level. Each bar is proportionally sized by percentage relative to the total student count. 
const niveles = [
    { label: '🟢 Bajo',   count: stats.bajo,         pct: stats.pct_bajo   },
    { label: '🟡 Medio',  count: stats.medio,        pct: stats.pct_medio  },
    { label: '🔴 Alto',   count: stats.alto,          pct: stats.pct_alto   },
    { label: '⚪ Insuf.', count: stats.insuficiente,  pct: Math.round(stats.insuficiente / total * 100) },
];
Each bar row shows:
  • A 28-character label on the left (emoji + level name)
  • A proportional filled bar using the risk-level color token (bg-risk-low, bg-risk-medium, bg-risk-high, bg-data-missing)
  • A right-aligned count (percentage%) label in the matching text color
Bars animate on load via a fade-in class. The minimum rendered width is 1% to keep zero-count levels visible. A legend in the section header provides color swatches for all four levels.

​
Full Student Listing

The “Detalle Completo — Todos los Estudiantes” section below the distribution bars renders a full <table> of every student, sorted by risk severity: 
const orden = { '🔴': 0, '🟡': 1, '⚪': 2, '🟢': 3 };
const ordenados = [...estudiantes].sort((a, b) =>
    (orden[a.nivel_riesgo] ?? 4) - (orden[b.nivel_riesgo] ?? 4)
);
High-risk students appear at the top; low-risk students at the bottom.

​
Table Columns

ColumnContentVisibility
EstudianteBold name, {id} • {grado} sub-labelAlways visible
RiesgoPill badge with emoji + level label, background tintAlways visible
Motivo PrincipalFirst entry from motivos array, emoji stripped, italicizedDesktop only (md:table-cell)
Origen IASource badge (see below)Desktop only (md:table-cell)

​
origen_ia Badges in the Listing

The full listing surfaces the AI data-source flag for each student as a colored micro-badge:
origen_ia ValueBadge TextStyle
"vivo"EN VIVOGreen background, text-risk-low
"fallback"RESPALDOAmber background, text-risk-medium
"no_aplica"N/ASlate background, text-data-missing
(other / error)ERRORRed background, text-risk-high

​
Who Uses This Page

Directors & Coordinators

Use the distribution bars and summary stats to assess institutional risk exposure and track improvement period over period.

Audit & Compliance

The full student listing with origen_ia badges and deterministic motivos provides a traceable, auditable record of every classification decision, conforming to Art. III of the system specification.
The reports page shares the same left sidebar and top navbar navigation pattern as the admin and monitoring panels.
LabelIconPath
Dashboarddashboard/admin.html
Monitoreoperson_search/monitoreo.html
Reportes (current)bar_chart/reportes.html
Estudiantesgroup/estudiantes.html
A “Cerrar Sesión” link at the bottom of the sidebar navigates to / (the login page).
The reports page does not include a print button in its top navbar, but the admin panel’s Resumen Institucional page (/admin.html) does — it exposes a “Imprimir Reporte” button that calls window.print() for a browser-native PDF export.

Build docs developers (and LLMs) love

Get started for freeTalk to us