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 monitoring panel is the primary daily workspace for teachers. It presents every student in the cohort as a sortable, filterable table with color-coded risk badges, and opens a sticky side panel with deep per-student detail — including the AI-generated explanation from Google Gemini and a pedagogical recommendation — when any row is selected.

​
URL

http://localhost:8000/monitoreo.html

​
Risk Level Color Coding

All student risk levels are classified by the deterministic engine described in Art. III of the system specification. The four possible states are:
BadgeEmojiLabelCSS Color TokenMeaning
🟢🟢BAJOrisk-low (#22C55E)Low risk — no critical thresholds breached
🟡🟡MEDIOrisk-medium (#F59E0B)Medium risk — one or more warning-level thresholds
🔴🔴ALTOrisk-high (#EF4444)High risk — critical dropout indicators present
⚪⚪DATO INSUFICIENTEdata-missing (#94A3B8)Insufficient data — manual review required
Each badge renders as a pill with a colored dot, background tint, and uppercase label.

​
Data Loading

On page load, the panel calls GET /api/estudiantes automatically: 
document.addEventListener('DOMContentLoaded', () => cargarEstudiantes());
The cargarEstudiantes function fetches from the API and populates both the summary stats grid and the student table: 
async function cargarEstudiantes(forceRefresh = false) {
    const url = `${API_BASE}/api/estudiantes${forceRefresh ? '?force_refresh=true' : ''}`;
    const resp = await fetch(url);
    todosLosEstudiantes = await resp.json();

    renderStats(todosLosEstudiantes);
    renderTabla(todosLosEstudiantes);
}
The API caches results in memory after the first call. Passing force_refresh=true forces the backend to rerun the classifier and call the Gemini API for every student.

​
Summary Stats Cards

At the top of the panel, four stat cards are rendered dynamically from the loaded data:

Total Estudiantes

Total number of students in the active cohort. Tagged with the period label “2024-I”.

Riesgo Alto 🔴

Count of students with nivel_riesgo === '🔴'. Labeled “Crítico” in red.

Riesgo Medio 🟡

Count of students at medium risk. Labeled “Atención” in amber.

Dato Insuficiente ⚪

Students who cannot be classified due to missing data. Labeled “Pendiente” in slate.

​
Student Table

The main content area is a col-span-8 table on large screens, shrinking to full-width on mobile. Each row shows:
ColumnContent
EstudianteAvatar initials (color-coded by risk), full name, ID, and grade
Riesgo (Art. III)Pill badge with dot, background, and label for the current risk level
Variable claveThe first entry from the motivos array (hidden on mobile)
Acción”Ver Detalle” button that opens the side detail panel

​
Search and Filter

A search input in the table header filters rows in real time by name or student ID: 
function filtrarEstudiantes(texto) {
    const filtrados = texto.trim() === ''
        ? todosLosEstudiantes
        : todosLosEstudiantes.filter(e =>
            e.nombre.toLowerCase().includes(texto.toLowerCase()) ||
            e.id.toLowerCase().includes(texto.toLowerCase())
        );
    renderTabla(filtrados);
}
The input carries a person_search icon prefix and a placeholder: “Filtrar por nombre o ID…”

​
Force Refresh Button

A “Sincronizar Datos” button in the top header bar calls cargarEstudiantes(true), triggering a full backend reprocess with ?force_refresh=true. The sync icon spins while the request is in flight. The button is hidden on mobile (hidden md:flex).

​
Student Detail Side Panel

Clicking any row — or the “Ver Detalle” button — opens a sticky side panel (col-span-4) to the right of the table. The selected row is highlighted with selected-row (a left blue border and faint primary tint). The detail panel is structured as follows:
1

Header

Large initials avatar (color matches risk level), full name, grade in uppercase, and a labeled risk badge including the Art. III reference.
2

Trazabilidad Determinista

A list of motivos — each displayed as a pill card — explaining exactly which academic thresholds triggered the risk classification. This section is always deterministic and never generated by AI.
3

Perspectiva IA (Google Gemini)

Rendered only when nivel_riesgo !== '⚪'. Contains two sub-sections:
  • Explicación Generativa — a narrative paragraph from Gemini explaining the student’s situation.
  • Recomendación Sugerida — a pedagogical action quoted in italic.
The section header includes a badge indicating the AI data source: “En vivo” or “Cache”.
4

Action Buttons

A primary “Editar Ficha Estudiante” button navigates to /estudiantes.html?id={est.id}. A secondary share icon button is also present.

​
The origen_ia Indicator

Every student record carries an origen_ia field that describes how the AI content was sourced. The panel surfaces this visibly:
origen_ia ValueDisplayMeaning
"vivo"Green “En vivo” badgeExplanation generated live by Gemini API this session
"fallback"Amber “Cache” badge + ⚠️ warning bannerExplanation loaded from a previous valid response
"no_aplica"Not shown (⚪ state renders block message instead)Student has insufficient data; AI was not called
"error_sin_cache"Red error blockGemini API failed and no cached response exists
When any student is in fallback mode, a banner also appears above the student table:
⚠️ Modo de respaldo activo: Algunas explicaciones fueron generadas previamente y se muestran desde el cache local. La clasificación de riesgo es siempre determinista y actual.

​
Fallback and Error States

Server Unreachable

If the fetch call fails, the table body renders a cloud_off icon, a description, and a “Reintentar” button that calls cargarEstudiantes() again.

No Students Found

If the search filter returns zero results, the table renders: “No se encontraron estudiantes.”
The monitoring panel includes a persistent left sidebar on desktop (lg:flex) and a bottom navigation bar on mobile. Desktop sidebar — all four destinations:
DestinationIconPath
Inicio (Admin Dashboard)dashboard/admin.html
Monitoreo (current)person_search/monitoreo.html
Reportesbar_chart/reportes.html
Estudiantesgroup/estudiantes.html
A “Cerrar Sesión” button at the bottom of the sidebar redirects to / (the login page). Mobile bottom nav — three shortcuts only (Estudiantes is not included):
DestinationIconPath
Iniciohome/admin.html
Monitoreo (current)person_search/monitoreo.html
Reportesbar_chart/reportes.html

Build docs developers (and LLMs) love

Get started for freeTalk to us