Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rtajio/ESEN/llms.txt

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

The Reports view (view-reportes) gives administrators a complete picture of extracurricular activity data for the current session. It is divided into three sections: a horizontal bar chart showing hours broken down by category, a general summary panel with six aggregate figures, and a full detail table of all activities. All data is drawn directly from the live actividades array — there is no separate reporting database or cache.
Reports reflect the current in-session state only. Because ESEN is a browser-only static app with no persistent storage, all data resets when the page is reloaded.

​
Hours by category

The top-left card renders a horizontal CSS bar chart. For each of the five categories, renderReportes() (app.js:370) sums the horas field of every matching activity, then computes a percentage relative to the category with the most hours:
app.js
const cats  = ['Académico', 'Deportivo', 'Cultural', 'Voluntariado', 'Liderazgo'];
const horas = cats.map(c =>
  actividades.filter(a => a.cat === c).reduce((s, a) => s + a.horas, 0)
);
const maxH = Math.max(...horas, 1);

// For each category i:
const pct = Math.round(horas[i] / maxH * 100);
Each bar row consists of:
  • A fixed-width label (110 px) showing the category name.
  • A flex-grow track filled to pct% width using the green --green-500 colour.
  • A right-aligned value showing the raw hour count (e.g. 20h).
The Math.max(...horas, 1) guard prevents division by zero when no activities have been entered yet.

​
General summary

The top-right card shows six computed figures:
LabelCalculation
Total actividadesactividades.length
Actividades activasactividades.filter(a => a.activo).length
Horas totalesactividades.reduce((s, a) => s + a.horas, 0)
Total participacionesactividades.reduce((s, a) => s + a.participantes.length, 0)
Promedio horas / actividadMath.round(totalHrs / actividades.length) (0 when no activities)
Estudiantes registradosestudiantes.length (the static roster array)
Total participaciones counts raw participant slots, not unique people. If the same student appears in three activities, they contribute 3 to this total. For unique participant counts, see the Participantes stat card on the dashboard.

​
Activity detail table

Below the two summary cards, a full table lists every activity with the following columns:
ColumnSource fieldNotes
ActividadnombreBold
CategoríacatCategory badge via catBadge()
HorashorasDisplayed as Xh, bold
Participantesparticipantes.lengthRaw count
ResoluciónresSmall grey text
FechafechaDD/MM/YYYY via formatDate()
Unlike the dashboard table, this table shows all activities with no row limit and no filtering controls.

​
CSV export

The Exportar CSV button in the detail table header calls exportCSV() (app.js:413). The export includes every activity in the current session.

​
Export format

  • Filename: reporte-actividades-esen.csv
  • Encoding: UTF-8 with BOM (\uFEFF) prepended so that Excel opens the file with correct character encoding
  • Headers: Actividad, Categoría, Horas, Participantes, Resolución, Fecha, Estado
  • Delivery: Blob + URL.createObjectURL — no server required

​
exportCSV() source

app.js
function exportCSV() {
  const headers = ['Actividad','Categoría','Horas','Participantes','Resolución','Fecha','Estado'];
  const rows    = actividades.map(a => [
    `"${a.nombre}"`, a.cat, a.horas, a.participantes.length, a.res, a.fecha,
    a.activo ? 'Activo' : 'Inactivo'
  ]);
  const csv = [headers, ...rows].map(r => r.join(',')).join('\n');
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
  const url  = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href     = url;
  link.download = 'reporte-actividades-esen.csv';
  link.click();
  URL.revokeObjectURL(url);
  showToast('Reporte exportado correctamente');
}
  • Actividad — wrapped in double quotes to handle activity names that contain commas.
  • Categoría — plain string value (e.g. Académico).
  • Horas — integer hour count for that activity.
  • Participantes — count of participants, not their names.
  • Resolución — resolution number string (e.g. RES-2024-001).
  • Fecha — ISO date string (YYYY-MM-DD) as stored internally.
  • Estado — Activo or Inactivo.
Microsoft Excel does not automatically detect UTF-8 encoding without a byte-order mark. Prepending \uFEFF ensures that accented characters in Spanish (e.g. Categoría, Resolución) display correctly when the CSV is opened in Excel on Windows without any manual import configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us