Skip to main content

​
Overview

Classes move through different states during their lifecycle, from initial scheduling to completion or cancellation. Each state has specific colors, labels, and business rules.

​
State Enum

export type EstadoClase =
  | "PROGRAMADA"
  | "INICIADA"
  | "COMPLETADA"
  | "CANCELADA"
  | "ACA"
  | "ASA";
See: ~/workspace/source/src/types/enums.ts:8-14

​
State Definitions

​
1. PROGRAMADA (Scheduled)

Programada

Class is scheduled and awaiting the start time
Color: Orange (🟠)
Default: All new classes start in this state
Editable: Yes

​
Characteristics

  • Initial state for all created classes
  • Class is scheduled but hasn’t started yet
  • Can be edited or deleted
  • Counts toward student’s monthly quota
ClaseForm.tsx
const [estado, setEstado] = useState<Clase["estado"]>("PROGRAMADA");
See: ~/workspace/source/src/components/forms/ClaseForm.tsx:86

​
2. INICIADA (Started)

Iniciada

Class is currently in progress
Color: Blue (🔵)
Editable: No

​
Characteristics

  • Class has started but not yet completed
  • Cannot be edited or deleted
  • Indicates active session
  • Typically short-lived state
Once a class reaches INICIADA state, it can no longer be edited or deleted.

​
3. COMPLETADA (Completed)

Completada

Class was successfully completed
Color: Green (🟢)
Editable: No

​
Characteristics

  • Class finished successfully
  • Student attended and completed the lesson
  • Cannot be edited or deleted (historical record)
  • Counts toward student’s attendance statistics
  • Counts toward instructor’s completed classes

​
4. CANCELADA (Cancelled)

Cancelada

Class was cancelled
Color: Red (🔴)
Editable: No

​
Characteristics

  • Class was cancelled for various reasons
  • Cannot be edited or deleted
  • Does not count toward student’s quota
  • Preserved for historical records

​
Cancellation Reasons

From the README, when cancelling a full day:
Permite seleccionar motivo:
  • Lluvia
  • Feriado
  • Mantenimiento
  • Evento Especial
  • Emergencia
  • Otro (con observaciones personalizadas)
See: ~/workspace/source/README.md:311-317

​
5. ACA (Absence with Notice)

ACA - Ausencia Con Aviso

Student notified they would not attend
Color: Purple (🟣)
Editable: No

​
Characteristics

  • Student provided advance notice of absence
  • More favorable than ASA (unexcused absence)
  • May or may not count toward quota depending on school policy
  • Shows student courtesy and communication

​
6. ASA (Absence without Notice)

ASA - Ausencia Sin Aviso

Student did not attend without notice
Color: Pink/Rose (🌸)
Editable: No

​
Characteristics

  • Student did not show up and didn’t notify
  • Unexcused absence
  • May have policy implications
  • Typically counts against student quota
  • May affect student standing

​
State Colors and Labels

The system uses consistent color coding throughout:
constants
const ESTADO_COLORS = {
  PROGRAMADA: "warning",
  INICIADA: "info",
  COMPLETADA: "success",
  CANCELADA: "destructive",
  ACA: "purple",
  ASA: "pink",
};

const ESTADO_LABELS = {
  PROGRAMADA: "Programada",
  INICIADA: "Iniciada",
  COMPLETADA: "Completada",
  CANCELADA: "Cancelada",
  ACA: "ACA",
  ASA: "ASA",
};
From the README:
  • Borde izquierdo: Color según estado de la clase:
    • 🟠 Naranja: PROGRAMADA
    • 🔵 Azul: INICIADA
    • 🟢 Verde: COMPLETADA
    • 🔴 Rojo: CANCELADA
    • 🟣 Púrpura: ACA (Ausencia con Aviso)
    • 🌸 Rosa: ASA (Ausencia sin Aviso)
See: ~/workspace/source/README.md:280-285

​
Edit Restrictions

​
Cannot Edit States

Classes in the following states cannot be edited: 
export function puedeEditarClase(clase: Clase): boolean {
  const estadosNoEditables: EstadoClase[] = [
    "COMPLETADA",
    "INICIADA",
    "CANCELADA",
  ];
  return !estadosNoEditables.includes(clase.estado);
}
From the README:
No se pueden editar clases con estado:
  • COMPLETADA
  • INICIADA
  • CANCELADA
Razón: Las clases finalizadas son registro histórico
See: ~/workspace/source/README.md:222-227

​
UI Indicators

The system shows disabled edit controls for finalized classes:
Clases.tsx
<DropdownMenuItem
  onClick={(e) => {
    e.stopPropagation();
    openEdit(row);
  }}
  disabled={!puedeEditar}
>
  <Pencil className="mr-2 h-4 w-4" />
  <div className="flex flex-col">
    <span>Editar</span>
    {!puedeEditar && (
      <span className="text-xs text-muted-foreground">
        Clase finalizada
      </span>
    )}
  </div>
</DropdownMenuItem>
See: ~/workspace/source/src/pages/Clases.tsx:416-432

​
State Transitions

​
Typical Flow

1

Creation

Class created in PROGRAMADA state
2

Start

At lesson time, optionally changed to INICIADA
3

Completion

After lesson, changed to COMPLETADA

​
Alternative Flows

PROGRAMADA → CANCELADA (for weather, emergencies, etc.)
PROGRAMADA → ACA (student notified in advance)
PROGRAMADA → ASA (student didn’t show and didn’t notify)

​
Bulk State Changes

The system supports cancelling multiple classes at once:

​
Cancel Full Day

From the README:
3. Cancelar Día Completo
  • Disponible en Vista Día
  • Cancela todas las clases del día actual
  • Permite seleccionar motivo
  • Solo cancela clases PROGRAMADAS (respeta completadas y ya canceladas)
See: ~/workspace/source/README.md:309-319
Bulk cancellation only affects classes in PROGRAMADA state. Completed and already cancelled classes are preserved.

​
Display in System

State badges are shown throughout the interface:
Clases.tsx
{
  header: "Estado",
  cell: (row: Clase) => {
    const variant = ESTADO_COLORS[row.estado];
    const label = ESTADO_LABELS[row.estado];
    return <StatusBadge status={variant}>{label}</StatusBadge>;
  },
}
See: ~/workspace/source/src/pages/Clases.tsx:395-402

​
Summary Table

StateColorCan EditCan DeleteCounts to QuotaNotes
PROGRAMADA🟠 Orange✅ Yes✅ Yes✅ YesInitial state
INICIADA🔵 Blue❌ No❌ No✅ YesIn progress
COMPLETADA🟢 Green❌ No❌ No✅ YesSuccessfully finished
CANCELADA🔴 Red❌ No❌ No❌ NoCancelled
ACA🟣 Purple❌ No❌ No⚠️ PolicyExcused absence
ASA🌸 Pink❌ No❌ No✅ YesUnexcused absence

​
Next Steps

Creating Classes

Learn how to create classes

Validations

Understand validation rules

Build docs developers (and LLMs) love

Get started for freeTalk to us