Instructor Registration

Overview

Instructors are essential staff members who teach riding lessons. Each instructor has a unique profile with personal information, color coding for calendar visibility, and activity status tracking.

Accessing Instructor Registration

Navigate to Instructors

Click Instructors in the main navigation menu.

Open Registration Form

Click the New Instructor button in the top-right corner to open the registration dialog.

Required Information

Personal Data (Mandatory)

All personal information fields are required for instructor registration:

DNI (National ID)

Format: Numbers only, no periods or dashes
Example: 12345678
Validation: Real-time duplicate checking
Trigger: Validation activates when 9+ digits are entered

// From InstructorForm.tsx:132-151
<Input
  id="dni"
  name="dni"
  autoComplete="off"
  type="text"
  value={dni}
  onChange={(e) => {
    setDni(e.target.value);
    onDniChange?.(e.target.value);
  }}
  placeholder="Solo números sin puntos"
  className={validacionDni?.duplicado ? "border-red-500" : ""}
  required
/>
{validacionDni?.duplicado && (
  <p className="text-sm text-red-500 mt-1">
    {validacionDni.mensaje}
  </p>
)}

If a duplicate DNI is detected, the form will show a red border and error message. The submit button will be disabled until the DNI is corrected.

Name and Surname

First Name: Full first name(s) of the instructor
Last Name: Full last name(s) of the instructor
Both fields are required and trimmed of whitespace on submission

// From InstructorForm.tsx:104-127
<Input
  id="nombre"
  type="text"
  autoComplete="given-name"
  placeholder="Nombre/s del instructor"
  value={nombre}
  onChange={(e) => setNombre(e.target.value)}
  required
/>

Date of Birth

Required for personnel records
Standard date picker format
Used for age verification and HR purposes

Contact Information

Telephone:

Format: Without 0 or 15 prefix
Example: 221234567
System automatically adds +549 prefix for Argentina

// From InstructorForm.tsx:83-86
let telefonoNormalizado = telefono;
if (telefonoNormalizado && !telefonoNormalizado.startsWith("+549")) {
  telefonoNormalizado = `+549${telefonoNormalizado.replace(/^\+/, "")}`;
}

Email (Optional but recommended):

Used for communications
System notifications
Schedule updates

Phone numbers are automatically normalized with the +549 country code when saved.

Color Assignment

Each instructor is assigned a unique color for visual identification in the calendar.

Color Picker

The system provides 7 preset colors:

// From instructor.constants.ts:1-9
export const PRESET_COLORS = [
  "#E06666", // Red
  "#CBBBF0", // Purple
  "#FFBE66", // Orange
  "#F5A6E8", // Pink
  "#FFF76A", // Yellow
  "#9FC5F8", // Blue
  "#93C47D", // Green
];

Color Selection UI

// From InstructorForm.tsx:190-217
<div className="flex gap-2 flex-wrap">
  {PRESET_COLORS.map((presetColor) => (
    <button
      type="button"
      key={presetColor}
      onClick={() => setColor(presetColor)}
      className={`w-10 h-10 rounded-full border-2 transition-all ${
        color === presetColor
          ? "border-primary ring-2 ring-primary/20 scale-110"
          : "border-gray-300 hover:scale-105"
      }`}
      style={{ backgroundColor: presetColor }}
      title={presetColor}
    />
  ))}
</div>

Red

#E06666High visibility, ideal for senior instructors

Purple

#CBBBF0Soft and distinctive

Orange

#FFBE66Warm and welcoming

Pink

#F5A6E8Bright and cheerful

Yellow

#FFF76AHigh contrast for readability

Blue

#9FC5F8Professional and calm

Green

#93C47DNatural and approachable

How Colors Are Used

Calendar cells: Background color with lightened opacity
Class cards: Border or accent color
Schedule view: Quick instructor identification
Reports: Color-coded statistics

Choose colors that are visually distinct from each other to avoid confusion when viewing multiple instructors’ schedules simultaneously.

Form Validation

The registration form includes comprehensive validation:

DNI Duplicate Check

// From InstructorForm.tsx:70-74
if (validacionDni?.duplicado) {
  toast.error("Ya existe un instructor con este DNI");
  return;
}

Validates in real-time as user types
Activates after 9 digits entered
Checks against all existing instructors
Excludes current instructor when editing

Required Fields Validation

// From InstructorForm.tsx:76-80
if (!nombre.trim() || !apellido.trim() || !dni.trim()) {
  toast.error("Nombre, apellido y DNI son obligatorios");
  return;
}

Submit Button State

// From InstructorForm.tsx:233
<Button type="submit" disabled={isPending || validacionDni?.duplicado}>
  {isPending
    ? "Guardando..."
    : instructor
      ? "Guardar Cambios"
      : "Crear Instructor"}
</Button>

Button is disabled when:

Form is submitting (isPending)
DNI is duplicate (validacionDni?.duplicado)

Complete Registration Process

Enter Personal Information

Fill in all required fields:

DNI (system validates for duplicates)
First and last name
Date of birth
Phone number (without 0 or 15)
Email (optional but recommended)

Select Instructor Color

Choose a color from the 7 preset options:

Click on the color circle
Selected color shows larger with ring effect
Color preview displays hex code
This color will identify the instructor in calendars

Submit Registration

Click Create Instructor to save. The system will:

Validate all required fields
Check for duplicate DNI
Normalize phone number with +549 prefix
Create the instructor with active status
Assign the selected color

Verify Creation

The new instructor:

Appears in the instructors list
Is available for class assignments
Shows in calendar with assigned color
Is set to active status by default

Automatic Configuration

Several fields are set automatically:

Active Status

// From InstructorForm.tsx:49
const [activo, setActivo] = useState(true);

New instructors are automatically set as active (activo: true).

Default Color

// From InstructorForm.tsx:50
const [color, setColor] = useState(PRESET_COLORS[0]);

If no color is selected, the first preset color (Red #E06666) is assigned.

After Registration

Once registered, the instructor:

✅ Appears in active instructors list
✅ Can be assigned to classes
✅ Shows in calendar with their color
✅ Is available in instructor filters and reports
✅ Can receive class assignments immediately

Editing Instructor Details

To modify an existing instructor:

Locate Instructor

Navigate to Instructors and find the instructor in the list.

Open Edit Form

Click the Edit button (pencil icon) in the actions menu.

Modify Fields

Update any field:

Personal information
Contact details
Color assignment
Active/inactive status (toggle switch appears in edit mode)

Save Changes

Click Save Changes. Updates take effect immediately.

Status Toggle (Edit Mode Only)

// From InstructorForm.tsx:219-224
{instructor && (
  <div className="flex items-center gap-3">
    <Switch id="activo" checked={activo} onCheckedChange={setActivo} />
    <Label htmlFor="activo">Está activo</Label>
  </div>
)}

The active/inactive toggle only appears when editing an existing instructor, not during initial registration.

Technical Details

Data Structure

// From InstructorForm.tsx:11-20
export interface InstructorFormData {
  nombre: string;
  apellido: string;
  telefono: string;
  email: string;
  fechaNacimiento: string;
  activo: boolean;
  color: string;
  dni: string;
}

Submission Logic

// From InstructorForm.tsx:88-97
onSubmit({
  nombre: nombre.trim(),
  apellido: apellido.trim(),
  telefono: telefonoNormalizado,
  email: email.trim(),
  fechaNacimiento,
  activo,
  color,
  dni: dni.trim(),
});

Common Scenarios

Registering Multiple Instructors

When adding several instructors:

Assign distinct colors to each for easy calendar identification
Use consistent naming format (e.g., first name + last name)
Verify DNI for each to avoid duplicates
Add complete contact information for communications

Temporary or Substitute Instructors

For short-term instructors:

Register normally with all required information
Assign a unique color
When their contract ends, mark as inactive instead of deleting
Preserves historical class records

Deactivating an Instructor

When an instructor leaves:

Edit the instructor record
Toggle “Active” switch to OFF
They remain in the system but:
- Don’t appear in new class assignments
- Historical data is preserved
- Can be reactivated if they return

Best Practices

Do:

Assign distinct colors to avoid confusion
Include complete contact information
Use consistent naming conventions
Deactivate instead of deleting when instructors leave
Verify DNI carefully to avoid duplicates

Don’t:

Assign same color to multiple active instructors
Leave contact fields empty
Delete instructors with historical classes
Use inconsistent name formats

Schedule Management - Managing instructor schedules
Color Coding - Understanding the color system
Class Assignment - Assigning instructors to classes

Student Management

Instructor Management

Horse Management

Class Scheduling

Calendar & Scheduling

Reports & Analytics

Financial Management

Overview

Accessing Instructor Registration

Required Information

Personal Data (Mandatory)

Color Assignment

Color Picker

Color Selection UI

Red

Purple

Orange

Pink

Yellow

Blue

Green

How Colors Are Used

Form Validation

DNI Duplicate Check

Required Fields Validation

Submit Button State

Complete Registration Process

Automatic Configuration

Active Status

Default Color

After Registration

Editing Instructor Details

Status Toggle (Edit Mode Only)

Technical Details

Data Structure

Submission Logic

Common Scenarios

Best Practices

Build docs developers (and LLMs) love

Student Management

Instructor Management

Horse Management

Class Scheduling

Calendar & Scheduling

Reports & Analytics

Financial Management

​Overview

​Accessing Instructor Registration

​Required Information

​Personal Data (Mandatory)

​Color Assignment

​Color Picker

​Color Selection UI

Red

Purple

Orange

Pink

Yellow

Blue

Green

​How Colors Are Used

​Form Validation

​DNI Duplicate Check

​Required Fields Validation

​Submit Button State

​Complete Registration Process

​Automatic Configuration

​Active Status

​Default Color

​After Registration

​Editing Instructor Details

​Status Toggle (Edit Mode Only)

​Technical Details

​Data Structure

​Submission Logic

​Common Scenarios

​Best Practices

​Related Pages

Build docs developers (and LLMs) love

Overview

Accessing Instructor Registration

Required Information

Personal Data (Mandatory)

Color Assignment

Color Picker

Color Selection UI

How Colors Are Used

Form Validation

DNI Duplicate Check

Required Fields Validation

Submit Button State

Complete Registration Process

Automatic Configuration

Active Status

Default Color

After Registration

Editing Instructor Details

Status Toggle (Edit Mode Only)

Technical Details

Data Structure

Submission Logic

Common Scenarios

Best Practices

Related Pages