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 administrator dashboard is the first screen an admin user sees after login. It gives an at-a-glance summary of the current state of all extracurricular activities through four metric cards, followed by a table of the six most recently entered activities. All values are computed live from the in-memory actividades array every time renderDash() is called.

​
Stat cards

The dashboard renders four stat cards inside a responsive stats-grid. Each card holds an icon, a label, a large numeric value, and a short sub-label.

Total actividades

Count of activities where activo === true. Inactive (disabled) activities are excluded from this figure.

Participantes

Size of a Set built from every participant name across all activities, both active and inactive. Duplicate names are deduplicated automatically.

Horas acumuladas

Sum of horas × participantes.length for every active activity. This gives the total validated person-hours across the institution.

Resoluciones

Size of a Set built from every res field across all activities. Each unique resolution number is counted once.

​
renderDash() implementation

The four values are derived in renderDash() (app.js:193):
app.js
function renderDash() {
  const activas = actividades.filter(a => a.activo);
  const pts     = new Set(actividades.flatMap(a => a.participantes));
  const hrs     = activas.reduce((s, a) => s + a.horas * a.participantes.length, 0);
  const res     = new Set(actividades.map(a => a.res));

  document.getElementById('stat-total').textContent = activas.length;
  document.getElementById('stat-est').textContent   = pts.size;
  document.getElementById('stat-hrs').textContent   = hrs;
  document.getElementById('stat-res').textContent   = res.size;

  document.getElementById('dash-table').innerHTML = actividades.slice(0, 6).map(a => `
    <tr>
      <td><strong>${a.nombre}</strong></td>
      <td>${catBadge(a.cat)}</td>
      <td>${formatDate(a.fecha)}</td>
      <td><strong>${a.horas}h</strong></td>
      <td>${statusBadge(a.activo)}</td>
    </tr>
  `).join('');
}
pts uses flatMap over all activities (not only active ones), so a student who participated in a now-inactive activity is still counted in the Participants card.

​
Recent activities table

Below the stat cards, a card labelled Actividades recientes renders a table with up to six rows, taken from the front of the actividades array (actividades.slice(0, 6)). The table is not filtered — it reflects insertion order.
ColumnSource fieldNotes
ActividadnombreRendered in bold
CategoríacatRendered as a colour-coded badge
FechafechaFormatted as DD/MM/YYYY via formatDate()
HorashorasRendered as Xh in bold
EstadoactivoRendered as a status badge

​
”Ver todas” button

A Ver todas button in the card header calls showView('actividades'), navigating to the full Activities view where all records are shown with filters.

​
Status badges

Status is rendered by statusBadge(activo) (app.js:81):

Activo

CSS class badge badge-green — background #EAF3DE, text #27500A. Displayed when activo === true.

Inactivo

CSS class badge badge-gray — background #F1EFE8, text #444441. Displayed when activo === false.

​
Category badges

Category colours are defined in the CAT_COLORS mapping (app.js:13) and applied by the catBadge(c) helper (app.js:77):
app.js
const CAT_COLORS = {
  Académico:    'badge-blue',
  Deportivo:    'badge-teal',
  Cultural:     'badge-coral',
  Voluntariado: 'badge-green',
  Liderazgo:    'badge-amber',
};
CategoryBadge classBackgroundText
Académicobadge-blue#E6F1FB#0C447C
Deportivobadge-teal#E1F5EE#085041
Culturalbadge-coral#FAECE7#712B13
Voluntariadobadge-green#EAF3DE#27500A
Liderazgobadge-amber#FAEEDA#633806
The same catBadge() helper is reused in the Activities, Reports, and student history views, keeping badge colours consistent throughout the application.

Build docs developers (and LLMs) love

Get started for freeTalk to us