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.

Every extracurricular activity in ESEN is represented as a single JavaScript object stored in the in-memory actividades array. Understanding the data model helps administrators enter accurate data and troubleshoot situations where student hours appear incorrect. This guide covers each field, the five categories and their visual identifiers, the full activity lifecycle, and the logic used to aggregate hours per student.

​
Activity record fields

A unique numeric identifier assigned automatically when a new activity is created. The counter starts at 1 for demo data and increments via the nextId variable (starting at 7 after the six seed records). You cannot set or edit this field through the UI.
A free-text string for the human-readable name of the activity. Required. Displayed in bold in every table and in the modal title bar. Example: "Taller de Emprendimiento".
One of five fixed string values: Académico, Deportivo, Cultural, Voluntariado, or Liderazgo. Required. Controls the badge colour shown throughout the UI and is used for category filtering in the admin Activities view.
A string identifying the institutional resolution that authorises the activity. Required. The expected format is RES-YYYY-NNN, e.g. RES-2024-001. Displayed in grey small text in tables and shown in the student history list.
An ISO 8601 date string in YYYY-MM-DD format, e.g. "2024-03-15". Required. Stored and filtered in this format; displayed throughout the UI as DD/MM/YYYY via the formatDate helper.
A positive integer representing the number of hours the activity is worth. Required. Used to calculate student hour totals and the dashboard’s accumulated-hours stat card.
A free-text string with a brief description of the activity. Optional. In the activities table, only the first 55 characters are shown beneath the activity name (truncated with …).
An array of full-name strings, one entry per participant. Optional at creation time; defaults to an empty array if the field is left blank. Example: ["Carlos Mamani", "Lucía Torres", "Pedro Quispe"]. The participant count shown in the Participantes column of the activities table is participantes.length.
A boolean that controls visibility. true means the activity is active; false means it is disabled. New activities are always created with activo: true. The toggle (eye) button in the Actions column flips this value. Inactive activities are hidden from the student-facing public list and excluded from the Total actividades and Horas acumuladas dashboard stat cards.

​
Demo record example

The following record is drawn directly from the seed data in app.js:
app.js
{
  "id": 1,
  "nombre": "Taller de Emprendimiento",
  "cat": "Académico",
  "res": "RES-2024-001",
  "fecha": "2024-03-15",
  "horas": 8,
  "desc": "Taller de emprendimiento para estudiantes de ingeniería y administración.",
  "participantes": ["Carlos Mamani", "Lucía Torres", "Pedro Quispe"],
  "activo": true
}

​
Categories and badge colours

Each activity belongs to exactly one category. The category controls which CSS badge class is applied wherever the category appears in the UI.
CategoryCSS classColour
Académicobadge-blueLight blue background, dark blue text
Deportivobadge-tealLight teal background, dark teal text
Culturalbadge-coralLight coral background, dark coral text
Voluntariadobadge-greenLight green background, dark green text
Liderazgobadge-amberLight amber background, dark amber text
The CAT_COLORS map in app.js drives this lookup. Any activity with an unrecognised category value falls back to badge-gray.
Category values are fixed strings used for exact-match filtering. The dropdown in the activity form and the filter bar both enumerate the same five values. Do not enter free-text categories; they will not match any filter option.

​
Activity lifecycle

Activities move through a simple four-stage lifecycle:
1

Create

Click Registrar actividad in the Activities view. Fill in the required fields and click Guardar. The activity is appended to the actividades array with activo: true and a new auto-incremented id.
2

Active

The activity appears in the admin activities table, counts toward dashboard stats, and is visible to students in the public activities list. The Actions column shows an eye icon for the toggle button.
3

Disable / Enable

Click the eye icon to set activo: false. The icon switches to eye-off and the activity is hidden from students and excluded from active-only stats. Click the eye-off icon to re-enable; activo returns to true.
4

Delete

Click the red trash icon and confirm the dialog. The activity is permanently removed from the actividades array. This action cannot be undone within the session.
ESEN is a browser-only static application with no backend persistence. All data — including newly created or edited activities — is lost when the page is reloaded.

​
Recording participants

In the activity form, the Participantes (separados por coma) field accepts a single text string of full names separated by commas: 
Carlos Mamani, Lucía Torres, Pedro Quispe
On save, app.js splits this string on commas, trims whitespace from each name, and filters out empty entries:
app.js
const participantes = partRaw
  ? partRaw.split(',').map(p => p.trim()).filter(Boolean)
  : [];
The resulting array is stored on the participantes field. When editing an existing activity, the array is joined back with ", " to pre-fill the textarea.
Participant names must exactly match the nombre field of the corresponding student record for hours to aggregate correctly on student profiles. Names are compared with strict string equality — no fuzzy matching or normalisation is applied.

​
Filtering activities

The admin Activities view supports two independent filters that can be combined: By category — the dropdown performs an exact match on the cat field:
app.js
if (cat) data = data.filter(a => a.cat === cat);
By month — the month picker (<input type="month">) produces a YYYY-MM string. The filter checks whether the fecha field starts with that prefix:
app.js
if (month) data = data.filter(a => a.fecha.startsWith(month));
Because fecha is stored as YYYY-MM-DD, a month value of 2024-04 matches both 2024-04-02 and 2024-04-20. Click Limpiar to reset both filters.

​
How hours contribute to student totals

The getEstHoras function in app.js calculates a student’s total hours by scanning every activity in the actividades array and summing the horas value for each one that contains the student’s name in its participantes array:
app.js
function getEstHoras(nombre) {
  return actividades
    .filter(a => a.participantes.includes(nombre))
    .reduce((s, a) => s + a.horas, 0);
}
The same logic applies in the student-facing Mi historial view via renderHistorial, which also filters actividades by participantes.includes(miNombre). Both Horas acumuladas and Horas validadas on the student stat cards show the same value — the raw sum of horas across all matched activities, regardless of the activity’s activo status.
The dashboard’s Horas acumuladas stat card uses a different formula: it multiplies each active activity’s hours by its total participant count (horas × participantes.length) to produce a person-hours total, not a per-student total.

Build docs developers (and LLMs) love

Get started for freeTalk to us