feat(i18n & ux): auditoria, traduccion completa, correcciones ux y gestion de idioma en perfil

app/__init__.py

@@ -41,28 +41,34 @@ def create_app(config_class=Config):
     app.register_blueprint(genetic_bp)
     app.register_blueprint(genetic_web_bp)
     
-# Babel language selector
+    # Language selector function
+    def get_locale():
+        # 1. Check if language is explicitly set in URL parameters
+        lang = request.args.get('lang')
+        if lang and lang in app.config['LANGUAGES']:
+            return lang
+        
+        # 2. Check if user is authenticated and has a configured language in profile
+        from flask_login import current_user
+        if current_user.is_authenticated and getattr(current_user, 'preferred_language', None):
+            if current_user.preferred_language in app.config['LANGUAGES']:
+                return current_user.preferred_language
+        
+        # 3. Check if language is stored in session (e.g. manual switcher)
+        if 'language' in session and session['language'] in app.config['LANGUAGES']:
+            return session['language']
+        
+        # 4. Check browser language preference by default (especially on login/guest)
+        return request.accept_languages.best_match(app.config['LANGUAGES']) or app.config['BABEL_DEFAULT_LOCALE']
+
+    # Babel context processor
     @app.context_processor
     def inject_conf_vars():
         return dict(
             languages=app.config['LANGUAGES'],
-            current_lang=session.get('language', request.accept_languages.best_match(app.config['LANGUAGES']) or app.config['BABEL_DEFAULT_LOCALE'])
+            current_lang=str(get_locale())
         )
-    
-    # Language selector function
-    def get_locale():
-        # 1. Check if language is explicitly set in URL parameters
-        if request.args.get('lang'):
-            lang = request.args.get('lang')
-            if lang in app.config['LANGUAGES']:
-                return lang
-        
-        # 2. Check if language is stored in session
-        if 'language' in session:
-            return session['language']
-        
-        # 3. Check browser language preference
-        return request.accept_languages.best_match(app.config['LANGUAGES']) or app.config['BABEL_DEFAULT_LOCALE']
+
     
     # Configure Babel
     babel.init_app(app, locale_selector=get_locale)

app/forms/auth.py

@@ -1,13 +1,14 @@
 from flask_wtf import FlaskForm
 from wtforms import StringField, PasswordField, BooleanField, SubmitField
 from wtforms.validators import DataRequired, Email, Length
+from flask_babel import lazy_gettext as _l
 
 class LoginForm(FlaskForm):
-    email = StringField('Email', validators=[
+    email = StringField(_l('Email'), validators=[
         DataRequired(),
         Email(),
         Length(max=120)
     ])
-    password = PasswordField('Password', validators=[DataRequired()])
-    remember_me = BooleanField('Remember me')
-    submit = SubmitField('Sign In')
+    password = PasswordField(_l('Password'), validators=[DataRequired()])
+    remember_me = BooleanField(_l('Remember me'))
+    submit = SubmitField(_l('Sign In'))

app/forms/classroom.py

@@ -1,44 +1,45 @@
 from flask_wtf import FlaskForm
 from wtforms import StringField, IntegerField, TextAreaField, BooleanField, SubmitField, SelectField
 from wtforms.validators import DataRequired, Length, NumberRange, Optional
+from flask_babel import lazy_gettext as _l
 
 class ClassroomForm(FlaskForm):
-    # campus_id = SelectField('Campus', coerce=int, validators=[DataRequired()])
-    building = StringField('Building', validators=[
+    # campus_id = SelectField(_l('Campus'), coerce=int, validators=[DataRequired()])
+    building = StringField(_l('Building'), validators=[
         DataRequired(),
         Length(min=2, max=100)
     ])
-    room_number = StringField('Room Number', validators=[
+    room_number = StringField(_l('Room Number'), validators=[
         DataRequired(),
         Length(min=1, max=50)
     ])
-    floor = IntegerField('Floor', validators=[
+    floor = IntegerField(_l('Floor'), validators=[
         DataRequired(),
         NumberRange(min=1, max=50)
     ])
-    capacity = IntegerField('Capacity', validators=[
+    capacity = IntegerField(_l('Capacity'), validators=[
         DataRequired(),
         NumberRange(min=1, max=500)
     ])
-    description = TextAreaField('Description', validators=[
+    description = TextAreaField(_l('Description'), validators=[
         Optional(),
         Length(max=500)
     ])
-    is_active = BooleanField('Active', default=True)
-    submit = SubmitField('Save Classroom')
+    is_active = BooleanField(_l('Active'), default=True)
+    submit = SubmitField(_l('Save Classroom'))
 
 class ClassroomResourceForm(FlaskForm):
-    resource_type = SelectField('Resource Type', choices=[
-        ('PROJECTOR', 'Projector'),
-        ('WHITEBOARD', 'Whiteboard'),
-        ('COMPUTER', 'Computer'),
-        ('SOUND_SYSTEM', 'Sound System'),
-        ('MICROPHONE', 'Microphone'),
-        ('AIR_CONDITIONER', 'Air Conditioner'),
-        ('OTHER', 'Other')
+    resource_type = SelectField(_l('Resource Type'), choices=[
+        ('PROJECTOR', _l('Projector')),
+        ('WHITEBOARD', _l('Whiteboard')),
+        ('COMPUTER', _l('Computer')),
+        ('SOUND_SYSTEM', _l('Sound System')),
+        ('MICROPHONE', _l('Microphone')),
+        ('AIR_CONDITIONER', _l('Air Conditioner')),
+        ('OTHER', _l('Other'))
     ], validators=[DataRequired()])
-    brand = StringField('Brand', validators=[Optional(), Length(max=100)])
-    model = StringField('Model', validators=[Optional(), Length(max=100)])
-    specifications = TextAreaField('Specifications', validators=[Optional()])
-    functional = BooleanField('Functional', default=True)
-    submit = SubmitField('Save Resource')
+    brand = StringField(_l('Brand'), validators=[Optional(), Length(max=100)])
+    model = StringField(_l('Model'), validators=[Optional(), Length(max=100)])
+    specifications = TextAreaField(_l('Specifications'), validators=[Optional()])
+    functional = BooleanField(_l('Functional'), default=True)
+    submit = SubmitField(_l('Save Resource'))

app/forms/reservation.py

@@ -1,26 +1,27 @@
 from flask_wtf import FlaskForm
 from wtforms import SelectField, StringField, TextAreaField, IntegerField, SubmitField, DateTimeLocalField
 from wtforms.validators import DataRequired, Length, NumberRange, Optional, ValidationError
+from flask_babel import lazy_gettext as _l
 from datetime import datetime, timedelta
 
 class ReservationForm(FlaskForm):
-    classroom_id = SelectField('Classroom', coerce=int, validators=[DataRequired()])
-    commission_id = SelectField('Commission/Subject', coerce=int, validators=[DataRequired()])
-    start_time = DateTimeLocalField('Start Time', format='%Y-%m-%dT%H:%M', validators=[DataRequired()])
-    end_time = DateTimeLocalField('End Time', format='%Y-%m-%dT%H:%M', validators=[DataRequired()])
-    purpose = StringField('Purpose', validators=[
+    classroom_id = SelectField(_l('Classroom'), coerce=int, validators=[DataRequired()])
+    commission_id = SelectField(_l('Commission/Subject'), coerce=int, validators=[DataRequired()])
+    start_time = DateTimeLocalField(_l('Start Time'), format='%Y-%m-%dT%H:%M', validators=[DataRequired()])
+    end_time = DateTimeLocalField(_l('End Time'), format='%Y-%m-%dT%H:%M', validators=[DataRequired()])
+    purpose = StringField(_l('Purpose'), validators=[
         DataRequired(),
         Length(min=3, max=500)
     ])
-    expected_attendees = IntegerField('Expected Attendees', validators=[
+    expected_attendees = IntegerField(_l('Expected Attendees'), validators=[
         DataRequired(),
         NumberRange(min=1, max=500)
     ])
-    notes = TextAreaField('Notes', validators=[
+    notes = TextAreaField(_l('Notes'), validators=[
         Optional(),
         Length(max=1000)
     ])
-    submit = SubmitField('Make Reservation')
+    submit = SubmitField(_l('Make Reservation'))
     
     def validate_end_time(self, field):
         if field.data <= self.start_time.data:

app/models/user.py

@@ -14,6 +14,7 @@ class User(UserMixin, db.Model):
     is_active = db.Column(db.Boolean, default=True, nullable=False)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     last_login = db.Column(db.DateTime)
+    preferred_language = db.Column(db.String(10), default=None, nullable=True)
     
     # Virtual fields for future compatibility
     @property

app/routes/auth.py

@@ -25,6 +25,10 @@ def login():
             login_user(user, remember=form.remember_me.data)
             user.update_last_login()
             
+            # Si el usuario tiene idioma configurado en su perfil, sobrescribe el navegador en toda la sesión
+            if user.preferred_language and user.preferred_language in ['es', 'en']:
+                session['language'] = user.preferred_language
+            
             next_page = request.args.get('next')
             if not next_page or not next_page.startswith('/'):
                 next_page = url_for('main.dashboard')
@@ -41,15 +45,26 @@ def login():
 def logout():
     """Handle user logout"""
     logout_user()
+    # Al cerrar sesión, se limpia el idioma para que el login use el del navegador por defecto
+    session.pop('language', None)
     flash('You have been logged out successfully.', 'info')
     return redirect(url_for('auth.login'))
 
-@auth_bp.route('/profile')
+@auth_bp.route('/profile', methods=['GET', 'POST'])
 @login_required
 def profile():
     """User profile page"""
+    if request.method == 'POST':
+        lang = request.form.get('preferred_language')
+        if lang in ['es', 'en']:
+            current_user.preferred_language = lang
+            session['language'] = lang
+            db.session.commit()
+            flash('Idioma de preferencia actualizado correctamente.', 'success')
+        return redirect(url_for('auth.profile'))
     return render_template('auth/profile.html')
 
+
 @auth_bp.route('/change_password', methods=['GET', 'POST'])
 @login_required
 def change_password():

app/routes/classrooms.py

@@ -52,6 +52,7 @@ def add_classroom():
     
     return render_template('classrooms/add.html', form=form, title='Add Classroom')
 
+@classrooms_bp.route('/', endpoint='index')
 @classrooms_bp.route('/list')
 @login_required 
 def list_classrooms():

app/routes/main.py

@@ -1,5 +1,6 @@
 from flask import Blueprint, render_template, jsonify, redirect, url_for, session, request, flash
 from flask_login import login_required, current_user
+from app import db
 from app.models.reservation import Reservation
 from app.models.classroom import Classroom
 from app.models.subject import Subject
@@ -124,4 +125,8 @@ def set_language(language=None):
         language = 'en'
     
     session['language'] = language
+    if current_user.is_authenticated:
+        current_user.preferred_language = language
+        db.session.commit()
+        
     return redirect(request.referrer or url_for('main.dashboard'))

app/templates/auth/403.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block title %}Acceso Denegado (403) - Edu-Space Admin{% endblock %}
+
+{% block content %}
+<div class="container pt-5 mt-5 text-center">
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm p-5">
+                <div class="text-danger mb-3" style="font-size: 4rem;">
+                    <i class="bi bi-shield-x"></i>
+                </div>
+                <h1 class="h2 mb-2">403 - Acceso Denegado</h1>
+                <p class="text-muted mb-4">
+                    No tienes los permisos necesarios para acceder a este recurso. Esta sección está restringida exclusivamente a administradores.
+                </p>
+                <div>
+                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
+                        <i class="bi bi-house me-1"></i>Ir al Dashboard
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/auth/change_password.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block title %}Cambiar Contraseña - Edu-Space Admin{% endblock %}
+
+{% block content %}
+<div class="container pt-5 mt-4">
+    <div class="row justify-content-center">
+        <div class="col-lg-6 col-md-8">
+            <!-- Header -->
+            <div class="d-flex align-items-center justify-content-between mb-4">
+                <h1 class="h3 mb-0">
+                    <i class="bi bi-shield-lock text-primary me-2"></i>Cambiar Contraseña
+                </h1>
+                <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary btn-sm">
+                    <i class="bi bi-arrow-left me-1"></i>Volver al Perfil
+                </a>
+            </div>
+
+            <!-- Form Card -->
+            <div class="card border-0 shadow-sm">
+                <div class="card-body p-4">
+                    <form method="POST" action="{{ url_for('auth.change_password') }}">
+                        <div class="mb-3">
+                            <label for="current_password" class="form-label">Contraseña Actual</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                <input type="password" class="form-control" id="current_password" name="current_password" required placeholder="Ingresa tu contraseña actual">
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="new_password" class="form-label">Nueva Contraseña</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-key"></i></span>
+                                <input type="password" class="form-control" id="new_password" name="new_password" required minlength="6" placeholder="Mínimo 6 caracteres">
+                            </div>
+                            <div class="form-text">Debe tener al menos 6 caracteres.</div>
+                        </div>
+
+                        <div class="mb-4">
+                            <label for="confirm_password" class="form-label">Confirmar Nueva Contraseña</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-check2-circle"></i></span>
+                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="6" placeholder="Repite la nueva contraseña">
+                            </div>
+                        </div>
+
+                        <div class="d-grid gap-2">
+                            <button type="submit" class="btn btn-primary">
+                                <i class="bi bi-save me-1"></i>Actualizar Contraseña
+                            </button>
+                            <a href="{{ url_for('auth.profile') }}" class="btn btn-link text-muted">
+                                Cancelar
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/auth/login.html

@@ -1,42 +1,54 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ session.language or request.accept_languages.best_match(['es', 'en']) or 'es' }}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Edu-Space Admin</title>
+    <title>{% trans %}Login - Edu-Space Admin{% endtrans %}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
     <style>
         body {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-family: system-ui, -apple-system, sans-serif;
         }
         .login-card {
-            background: rgba(255, 255, 255, 0.95);
+            background: rgba(30, 41, 59, 0.95);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(10px);
             border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
             max-width: 450px;
             width: 100%;
+            color: #f8fafc;
         }
         .logo-section {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
             border-radius: 20px 20px 0 0;
             padding: 2rem;
             text-align: center;
             color: white;
+            position: relative;
+        }
+        .lang-switch {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
         }
     </style>
 </head>
 <body>
     <div class="login-card">
         <div class="logo-section">
+            <div class="lang-switch">
+                {% include 'partials/language_switcher.html' %}
+            </div>
             <i class="bi bi-building" style="font-size: 3rem;"></i>
-            <h3 class="mt-3">Edu-Space Admin</h3>
-            <p class="mb-0">Classroom Management System</p>
+            <h3 class="mt-3 mb-1 fw-bold">Edu-Space Admin</h3>
+            <p class="mb-0 text-white-50 small">{% trans %}Classroom Management System{% endtrans %}</p>
         </div>
         
         <div class="p-4">
@@ -55,10 +67,10 @@
                 {{ form.hidden_tag() }}
                 
                 <div class="mb-3">
-                    <label for="email" class="form-label">{{ form.email.label.text }}</label>
+                    <label for="email" class="form-label small text-secondary">{{ form.email.label.text }}</label>
                     <div class="input-group">
-                        <span class="input-group-text"><i class="bi bi-envelope"></i></span>
-                        {{ form.email(class="form-control", placeholder="Enter your email") }}
+                        <span class="input-group-text bg-dark border-secondary text-secondary"><i class="bi bi-envelope"></i></span>
+                        <input type="email" class="form-control bg-dark border-secondary text-white" id="email" name="email" value="{{ form.email.data or '' }}" required placeholder="{% trans %}Enter your email{% endtrans %}">
                     </div>
                     {% for error in form.email.errors %}
                         <div class="text-danger small mt-1">{{ error }}</div>
@@ -66,10 +78,10 @@
                 </div>
                 
                 <div class="mb-3">
-                    <label for="password" class="form-label">{{ form.password.label.text }}</label>
+                    <label for="password" class="form-label small text-secondary">{{ form.password.label.text }}</label>
                     <div class="input-group">
-                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
-                        {{ form.password(class="form-control", placeholder="Enter your password") }}
+                        <span class="input-group-text bg-dark border-secondary text-secondary"><i class="bi bi-lock"></i></span>
+                        <input type="password" class="form-control bg-dark border-secondary text-white" id="password" name="password" required placeholder="{% trans %}Enter your password{% endtrans %}">
                     </div>
                     {% for error in form.password.errors %}
                         <div class="text-danger small mt-1">{{ error }}</div>
@@ -78,18 +90,20 @@
                 
                 <div class="mb-3 form-check">
                     {{ form.remember_me(class="form-check-input") }}
-                    {{ form.remember_me.label(class="form-check-label") }}
+                    <label class="form-check-label text-secondary small" for="remember_me">{{ form.remember_me.label.text }}</label>
                 </div>
                 
                 <div class="d-grid">
-                    {{ form.submit(class="btn btn-primary btn-lg") }}
+                    <button type="submit" class="btn btn-primary btn-lg fw-semibold">
+                        <i class="bi bi-box-arrow-in-right me-1"></i> {{ form.submit.label.text }}
+                    </button>
                 </div>
             </form>
             
-            <div class="text-center mt-3">
-                <small class="text-muted">
-                    <i class="bi bi-shield-lock"></i> 
-                    Secure Login • All access is logged
+            <div class="text-center mt-4">
+                <small class="text-secondary">
+                    <i class="bi bi-shield-lock me-1"></i> 
+                    {% trans %}Secure Login • All access is logged{% endtrans %}
                 </small>
             </div>
         </div>

app/templates/auth/profile.html

@@ -0,0 +1,161 @@
+{% extends "base.html" %}
+
+{% block title %}{% trans %}User Profile{% endtrans %} - Edu-Space Admin{% endblock %}
+
+{% block content %}
+<div class="container pt-5 mt-4">
+    <div class="row justify-content-center">
+        <div class="col-lg-8">
+            <!-- Header -->
+            <div class="d-flex align-items-center justify-content-between mb-4">
+                <h1 class="h3 mb-0">
+                    <i class="bi bi-person-badge text-primary me-2"></i>{% trans %}My Profile{% endtrans %}
+                </h1>
+                <a href="{{ url_for('main.dashboard') }}" class="btn btn-outline-secondary btn-sm">
+                    <i class="bi bi-arrow-left me-1"></i>{% trans %}Dashboard{% endtrans %}
+                </a>
+            </div>
+
+            <!-- Profile Card -->
+            <div class="card border-0 shadow-sm mb-4">
+                <div class="card-body p-4">
+                    <div class="d-flex align-items-center mb-4">
+                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 72px; height: 72px; font-size: 2rem;">
+                            <i class="bi bi-person"></i>
+                        </div>
+                        <div>
+                            <h4 class="mb-1">{{ current_user.name }}</h4>
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="badge bg-primary">{{ current_user.role }}</span>
+                                {% if current_user.is_active %}
+                                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{% trans %}Active{% endtrans %}</span>
+                                {% else %}
+                                    <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>{% trans %}Inactive{% endtrans %}</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr class="my-4">
+
+                    <!-- User Details Grid -->
+                    <div class="row g-3">
+                        <div class="col-sm-6">
+                            <label class="form-label text-muted small mb-1">{% trans %}Email{% endtrans %}</label>
+                            <div class="fw-semibold">{{ current_user.email }}</div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label text-muted small mb-1">{% trans %}Full Name{% endtrans %}</label>
+                            <div class="fw-semibold">{{ current_user.name }}</div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label text-muted small mb-1">{% trans %}Access Role{% endtrans %}</label>
+                            <div class="fw-semibold">{{ current_user.role }}</div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label text-muted small mb-1">{% trans %}Last Login{% endtrans %}</label>
+                            <div class="fw-semibold">
+                                {% if current_user.last_login %}
+                                    {{ current_user.last_login.strftime('%Y-%m-%d %H:%M:%S') }}
+                                {% else %}
+                                    <span class="text-muted">{% trans %}First login{% endtrans %}</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label text-muted small mb-1">{% trans %}Registration Date{% endtrans %}</label>
+                            <div class="fw-semibold">
+                                {% if current_user.created_at %}
+                                    {{ current_user.created_at.strftime('%Y-%m-%d') }}
+                                {% else %}
+                                    <span class="text-muted">-</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr class="my-4">
+
+                    <!-- Language Preference Section -->
+                    <form method="POST" action="{{ url_for('auth.profile') }}">
+                        <label class="form-label fw-bold mb-2">
+                            <i class="bi bi-translate text-primary me-2"></i>{% trans %}Language Preference{% endtrans %}
+                        </label>
+                        <p class="text-muted small mb-3">
+                            {% trans %}If set, this language overrides the browser configuration for all your sessions.{% endtrans %}
+                        </p>
+                        <div class="row g-2 align-items-center">
+                            <div class="col-sm-8">
+                                <select class="form-select" name="preferred_language">
+                                    <option value="" {% if not current_user.preferred_language %}selected{% endif %}>
+                                        {% trans %}Auto-detect from browser (Default){% endtrans %}
+                                    </option>
+                                    <option value="es" {% if current_user.preferred_language == 'es' %}selected{% endif %}>
+                                        Español
+                                    </option>
+                                    <option value="en" {% if current_user.preferred_language == 'en' %}selected{% endif %}>
+                                        English
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="col-sm-4">
+                                <button type="submit" class="btn btn-outline-primary w-100">
+                                    <i class="bi bi-check2 me-1"></i>{% trans %}Save Preference{% endtrans %}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="card-footer bg-body-tertiary px-4 py-3 d-flex justify-content-between align-items-center">
+                    <span class="text-muted small">{% trans %}Account Security{% endtrans %}</span>
+                    <a href="{{ url_for('auth.change_password') }}" class="btn btn-primary btn-sm">
+                        <i class="bi bi-key me-1"></i>{% trans %}Change Password{% endtrans %}
+                    </a>
+                </div>
+            </div>
+
+            <!-- User Reservations Overview (if any) -->
+            {% if current_user.reservations %}
+            <div class="card border-0 shadow-sm mb-4">
+                <div class="card-header bg-body-tertiary">
+                    <h5 class="card-title mb-0 h6">
+                        <i class="bi bi-calendar-event me-2"></i>{% trans %}My Recent Reservations{% endtrans %}
+                    </h5>
+                </div>
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle mb-0">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>{% trans %}Classroom{% endtrans %}</th>
+                                    <th>{% trans %}Purpose{% endtrans %}</th>
+                                    <th>{% trans %}Date & Time{% endtrans %}</th>
+                                    <th>{% trans %}Status{% endtrans %}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for res in current_user.reservations[:5] %}
+                                <tr>
+                                    <td>
+                                        <span class="badge bg-secondary">{{ res.classroom.code_display if res.classroom else 'N/A' }}</span>
+                                    </td>
+                                    <td>{{ res.purpose }}</td>
+                                    <td>{{ res.start_time.strftime('%Y-%m-%d %H:%M') }}</td>
+                                    <td>
+                                        <span class="badge bg-{{ 'success' if res.status == 'CONFIRMED' else 'warning' if res.status == 'PENDING' else 'secondary' }}">
+                                            {{ res.status }}
+                                        </span>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/base.html

@@ -31,62 +31,43 @@
                 <ul class="navbar-nav me-auto">
                     <li class="nav-item">
                         <a class="nav-link" href="{{ url_for('main.dashboard') }}">
-                            <i class="bi bi-speedometer2"></i> Dashboard
+                            <i class="bi bi-speedometer2"></i> {% trans %}Dashboard{% endtrans %}
                         </a>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <i class="bi bi-door-open"></i> Classrooms
+                            <i class="bi bi-door-open"></i> {% trans %}Classrooms{% endtrans %}
                         </a>
                         <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="{{ url_for('classrooms.list_classrooms') }}">
-                                <i class="bi bi-list"></i> All Classrooms
+                                <i class="bi bi-list"></i> {% trans %}All Classrooms{% endtrans %}
                             </a></li>
                             <li><a class="dropdown-item" href="{{ url_for('classrooms.add_classroom') }}">
-                                <i class="bi bi-plus-circle"></i> Add Classroom
+                                <i class="bi bi-plus-circle"></i> {% trans %}Add Classroom{% endtrans %}
                             </a></li>
                         </ul>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <i class="bi bi-calendar3"></i> Schedule
+                            <i class="bi bi-calendar3"></i> {% trans %}Schedule{% endtrans %}
                         </a>
                         <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="{{ url_for('schedule.calendar_view') }}">
-                                <i class="bi bi-calendar-week"></i> Calendar View
+                                <i class="bi bi-calendar-week"></i> {% trans %}Calendar View{% endtrans %}
                             </a></li>
                             <li><a class="dropdown-item" href="{{ url_for('schedule.list_reservations') }}">
-                                <i class="bi bi-list-check"></i> All Reservations
+                                <i class="bi bi-list-check"></i> {% trans %}All Reservations{% endtrans %}
                             </a></li>
                             <li><a class="dropdown-item" href="{{ url_for('schedule.add_reservation') }}">
-                                <i class="bi bi-plus-circle"></i> New Reservation
+                                <i class="bi bi-plus-circle"></i> {% trans %}New Reservation{% endtrans %}
                             </a></li>
                             <li><a class="dropdown-item" href="{{ url_for('schedule.today_schedule') }}">
-                                <i class="bi bi-calendar-today"></i> Today's Schedule
+                                <i class="bi bi-calendar-today"></i> {% trans %}Today's Schedule{% endtrans %}
                             </a></li>
                         </ul>
                     </li>
                 </ul>
                 
-                <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <i class="bi bi-person-circle"></i> {{ current_user.first_name }} {{ current_user.last_name }}
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
-                                <i class="bi bi-person"></i> Profile
-                            </a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('auth.change_password') }}">
-                                <i class="bi bi-key"></i> Change Password
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
-                                <i class="bi bi-box-arrow-right"></i> Logout
-                            </a></li>
-                        </ul>
-                    </li>
-</ul>
                 
                 <ul class="navbar-nav">
                     <!-- Language Switcher -->
@@ -100,14 +81,14 @@
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end">
                             <li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
-                                <i class="bi bi-person"></i> Profile
+                                <i class="bi bi-person"></i> {% trans %}Profile{% endtrans %}
                             </a></li>
                             <li><a class="dropdown-item" href="{{ url_for('auth.change_password') }}">
-                                <i class="bi bi-key"></i> Change Password
+                                <i class="bi bi-key"></i> {% trans %}Change Password{% endtrans %}
                             </a></li>
                             <li><hr class="dropdown-divider"></li>
                             <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
-                                <i class="bi bi-box-arrow-right"></i> Logout
+                                <i class="bi bi-box-arrow-right"></i> {% trans %}Logout{% endtrans %}
                             </a></li>
                         </ul>
                     </li>

app/templates/classrooms/add.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Add Classroom - Edu-Space Admin{% endblock %}
+{% block title %}{% trans %}Add Classroom{% endtrans %} - Edu-Space Admin{% endblock %}
 
 {% block content %}
 <div class="container-fluid pt-5 mt-4">
@@ -8,10 +8,10 @@
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 class="h3">
-                <i class="bi bi-plus-circle text-primary"></i> Add Classroom
+                <i class="bi bi-plus-circle text-primary"></i> {% trans %}Add Classroom{% endtrans %}
             </h1>
             <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
-                <i class="bi bi-arrow-left"></i> Back to Classrooms
+                <i class="bi bi-arrow-left"></i> {% trans %}Back to Classrooms{% endtrans %}
             </a>
         </div>
     </div>
@@ -20,9 +20,9 @@
 <div class="row">
     <div class="col-lg-8 mx-auto">
         <div class="card border-0 shadow-sm">
-            <div class="card-header bg-white border-0">
-                <h5 class="mb-0">
-                    <i class="bi bi-door-open text-primary"></i> Classroom Information
+            <div class="card-header bg-body-tertiary border-0 py-3">
+                <h5 class="mb-0 h6 fw-bold">
+                    <i class="bi bi-door-open text-primary me-2"></i> {% trans %}Classroom Information{% endtrans %}
                 </h5>
             </div>
             <div class="card-body">
@@ -73,16 +73,17 @@
                         </div>
                         
                         <div class="col-md-6 mb-3">
-                            {{ form.is_active.label(class="form-check-label") }}
-                            <div class="form-check">
+                            <label class="form-label d-block">&nbsp;</label>
+                            <div class="form-check pt-2">
                                 {{ form.is_active(class="form-check-input") }}
+                                {{ form.is_active.label(class="form-check-label") }}
                             </div>
                         </div>
                     </div>
                     
                     <div class="mb-4">
                         {{ form.description.label(class="form-label") }}
-                        {{ form.description(class="form-control", rows="3", placeholder="Optional: Add any additional details about this classroom...") }}
+                        {{ form.description(class="form-control", rows="3", placeholder=_("Optional: Add any additional details about this classroom...")) }}
                         {% if form.description.errors %}
                             <div class="text-danger small mt-1">
                                 {{ form.description.errors[0] }}
@@ -93,13 +94,13 @@
                     <!-- Preview Section -->
                     <div class="alert alert-info">
                         <h6 class="alert-heading">
-                            <i class="bi bi-info-circle"></i> Preview
+                            <i class="bi bi-info-circle"></i> {% trans %}Preview{% endtrans %}
                         </h6>
                         <div id="classroom-preview">
-                            <p class="mb-0">Fill in the form to see a preview of the classroom code: 
+                            <p class="mb-1">{% trans %}Fill in the form to see a preview of the classroom code:{% endtrans %} 
                                 <span class="fw-bold" id="preview-code">-</span>
                             </p>
-                            <p class="mb-0">Full location: 
+                            <p class="mb-0">{% trans %}Full location:{% endtrans %} 
                                 <span class="fw-bold" id="preview-location">-</span>
                             </p>
                         </div>
@@ -107,9 +108,11 @@
                     
                     <div class="d-flex justify-content-between">
                         <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
-                            <i class="bi bi-x-circle"></i> Cancel
+                            <i class="bi bi-x-circle"></i> {% trans %}Cancel{% endtrans %}
                         </a>
-                        {{ form.submit(class="btn btn-primary") }}
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-save me-1"></i> {{ form.submit.label.text }}
+                        </button>
                     </div>
                 </form>
             </div>
@@ -118,16 +121,16 @@
 </div>
 
 <!-- Resources Section -->
-<div class="row mt-4">
+<div class="row mt-4 mb-4">
     <div class="col-lg-8 mx-auto">
         <div class="card border-0 shadow-sm">
-            <div class="card-header bg-white border-0">
-                <h5 class="mb-0">
-                    <i class="bi bi-tools text-warning"></i> Resources (Optional)
+            <div class="card-header bg-body-tertiary border-0 py-3">
+                <h5 class="mb-0 h6 fw-bold">
+                    <i class="bi bi-tools text-warning me-2"></i> {% trans %}Resources (Optional){% endtrans %}
                 </h5>
             </div>
             <div class="card-body">
-                <p class="text-muted">You can add classroom resources after creating the classroom.</p>
+                <p class="text-muted mb-0">{% trans %}You can add classroom resources after creating the classroom.{% endtrans %}</p>
             </div>
         </div>
     </div>
@@ -142,10 +145,11 @@ $(document).ready(function() {
         const building = $('#building').val();
         const roomNumber = $('#room_number').val();
         const floor = $('#floor').val();
+        const floorLabel = '{{ _("Floor") }}';
         
         if (building && roomNumber && floor) {
             $('#preview-code').text(`${building}-${roomNumber}`);
-            $('#preview-location').text(`${building} - Floor ${floor}`);
+            $('#preview-location').text(`${building} - ${floorLabel} ${floor}`);
         } else {
             $('#preview-code').text('-');
             $('#preview-location').text('-');
@@ -162,7 +166,6 @@ $(document).ready(function() {
     $('#classroom-form').on('submit', function(e) {
         let isValid = true;
         
-        // Required fields validation
         if (!$('#building').val().trim()) {
             $('#building').addClass('is-invalid');
             isValid = false;

app/templates/classrooms/list.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Classrooms - Edu-Space Admin{% endblock %}
+{% block title %}{% trans %}Classrooms{% endtrans %} - Edu-Space Admin{% endblock %}
 
 {% block content %}
 <div class="container-fluid pt-5 mt-4">
@@ -8,11 +8,11 @@
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 class="h3">
-                <i class="bi bi-door-open text-primary"></i> Classrooms
+                <i class="bi bi-door-open text-primary"></i> {% trans %}Classrooms{% endtrans %}
             </h1>
             <div>
                 <a href="{{ url_for('classrooms.add_classroom') }}" class="btn btn-primary">
-                    <i class="bi bi-plus-circle"></i> Add Classroom
+                    <i class="bi bi-plus-circle"></i> {% trans %}Add Classroom{% endtrans %}
                 </a>
             </div>
         </div>
@@ -27,24 +27,24 @@
                 <form method="GET" class="row g-3">
                     <div class="col-md-4">
                         <input type="text" name="search" class="form-control" 
-                               placeholder="Search by building, room, description..." 
+                               placeholder="{% trans %}Search by building, room, description...{% endtrans %}" 
                                value="{{ search }}">
                     </div>
                     <div class="col-md-3">
-                        <div class="form-check">
+                        <div class="form-check pt-2">
                             <input class="form-check-input" type="checkbox" name="active_only" 
                                    id="activeOnly" {% if active_only %}checked{% endif %}>
                             <label class="form-check-label" for="activeOnly">
-                                Show active classrooms only
+                                {% trans %}Show active classrooms only{% endtrans %}
                             </label>
                         </div>
                     </div>
                     <div class="col-md-3">
                         <button type="submit" class="btn btn-outline-primary">
-                            <i class="bi bi-search"></i> Search
+                            <i class="bi bi-search"></i> {% trans %}Search{% endtrans %}
                         </button>
                         <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
-                            <i class="bi bi-x-circle"></i> Clear
+                            <i class="bi bi-x-circle"></i> {% trans %}Clear{% endtrans %}
                         </a>
                     </div>
                 </form>
@@ -63,24 +63,24 @@
                 <div class="d-flex justify-content-between align-items-start mb-3">
                     <div>
                         <h5 class="card-title mb-1">
-                            {{ classroom.code }}
+                            {{ classroom.code_display }}
                         </h5>
                         <p class="text-muted small mb-2">
                             <i class="bi bi-geo-alt"></i> {{ classroom.get_full_location() }}
                         </p>
                     </div>
                     <span class="badge {% if classroom.is_active %}bg-success{% else %}bg-secondary{% endif %}">
-                        {% if classroom.is_active %}Active{% else %}Inactive{% endif %}
+                        {% if classroom.is_active %}{% trans %}Active{% endtrans %}{% else %}{% trans %}Inactive{% endtrans %}{% endif %}
                     </span>
                 </div>
                 
                 <div class="row small">
                     <div class="col-6">
-                        <span class="text-muted">Capacity:</span>
+                        <span class="text-muted">{% trans %}Capacity{% endtrans %}:</span>
                         <strong>{{ classroom.capacity }}</strong>
                     </div>
                     <div class="col-6">
-                        <span class="text-muted">Building:</span>
+                        <span class="text-muted">{% trans %}Building{% endtrans %}:</span>
                         <strong>{{ classroom.building }}</strong>
                     </div>
                 </div>
@@ -96,24 +96,24 @@
                     <small class="text-muted">
                         <i class="bi bi-tools"></i> 
                         {% if classroom.resources %}
-                            {{ classroom.resources|length }} resources
+                            {{ classroom.resources|length }} {% trans %}resources{% endtrans %}
                         {% else %}
-                            No resources registered
+                            {% trans %}No resources registered{% endtrans %}
                         {% endif %}
                     </small>
                 </div>
             </div>
             
-            <div class="card-footer bg-white border-0">
+            <div class="card-footer bg-body-tertiary border-0">
                 <div class="d-flex justify-content-between">
                     <div>
                         <a href="{{ url_for('classrooms.view_classroom', id=classroom.id) }}" 
                            class="btn btn-sm btn-outline-primary">
-                            <i class="bi bi-eye"></i> View
+                            <i class="bi bi-eye"></i> {% trans %}View{% endtrans %}
                         </a>
                         <a href="{{ url_for('classrooms.edit_classroom', id=classroom.id) }}" 
                            class="btn btn-sm btn-outline-secondary">
-                            <i class="bi bi-pencil"></i> Edit
+                            <i class="bi bi-pencil"></i> {% trans %}Edit{% endtrans %}
                         </a>
                     </div>
                     <form method="POST" action="{{ url_for('classrooms.toggle_classroom', id=classroom.id) }}" 
@@ -121,9 +121,9 @@
                         <button type="submit" class="btn btn-sm 
                                {% if classroom.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}">
                             {% if classroom.is_active %}
-                                <i class="bi bi-pause-circle"></i> Deactivate
+                                <i class="bi bi-pause-circle"></i> {% trans %}Deactivate{% endtrans %}
                             {% else %}
-                                <i class="bi bi-play-circle"></i> Activate
+                                <i class="bi bi-play-circle"></i> {% trans %}Activate{% endtrans %}
                             {% endif %}
                         </button>
                     </form>
@@ -141,7 +141,7 @@
         {% if classrooms.has_prev %}
             <li class="page-item">
                 <a class="page-link" href="{{ url_for('classrooms.list_classrooms', page=classrooms.prev_num, search=search, active_only=active_only) }}">
-                    Previous
+                    {% trans %}Previous{% endtrans %}
                 </a>
             </li>
         {% endif %}
@@ -169,7 +169,7 @@
         {% if classrooms.has_next %}
             <li class="page-item">
                 <a class="page-link" href="{{ url_for('classrooms.list_classrooms', page=classrooms.next_num, search=search, active_only=active_only) }}">
-                    Next
+                    {% trans %}Next{% endtrans %}
                 </a>
             </li>
         {% endif %}
@@ -182,16 +182,16 @@
     <div class="col-12">
         <div class="text-center py-5">
             <i class="bi bi-door-open text-muted" style="font-size: 4rem;"></i>
-            <h4 class="mt-3 text-muted">No classrooms found</h4>
+            <h4 class="mt-3 text-muted">{% trans %}No classrooms found{% endtrans %}</h4>
             <p class="text-muted">
                 {% if search %}
-                    No classrooms match your search criteria.
+                    {% trans %}No classrooms match your search criteria.{% endtrans %}
                 {% else %}
-                    No classrooms have been registered yet.
+                    {% trans %}No classrooms have been registered yet.{% endtrans %}
                 {% endif %}
             </p>
             <a href="{{ url_for('classrooms.add_classroom') }}" class="btn btn-primary">
-                <i class="bi bi-plus-circle"></i> Add First Classroom
+                <i class="bi bi-plus-circle"></i> {% trans %}Add First Classroom{% endtrans %}
             </a>
         </div>
     </div>

app/templates/dashboard.html

@@ -88,7 +88,7 @@
         <div class="card border-0 shadow-sm">
             <div class="card-header bg-white border-0">
                 <h5 class="mb-0">
-                    <i class="bi bi-graph-up text-primary"></i> Monthly Reservations
+                    <i class="bi bi-graph-up text-primary"></i> {% trans %}Monthly Reservations{% endtrans %}
                 </h5>
             </div>
             <div class="card-body">
@@ -102,28 +102,28 @@
         <div class="card border-0 shadow-sm">
             <div class="card-header bg-white border-0">
                 <h5 class="mb-0">
-                    <i class="bi bi-lightning text-warning"></i> Quick Actions
+                    <i class="bi bi-lightning text-warning"></i> {% trans %}Quick Actions{% endtrans %}
                 </h5>
             </div>
             <div class="card-body">
                 <div class="d-grid gap-2">
-<a href="{{ url_for('classrooms.add_classroom') }}" class="btn btn-outline-primary">
-                        <i class="bi bi-plus-circle"></i> Add Classroom
+                    <a href="{{ url_for('classrooms.add_classroom') }}" class="btn btn-outline-primary">
+                        <i class="bi bi-plus-circle"></i> {% trans %}Add Classroom{% endtrans %}
                     </a>
                     <a href="{{ url_for('schedule.commissions_view') }}" class="btn btn-outline-warning">
-                        <i class="bi bi-people"></i> Manage Commissions
+                        <i class="bi bi-people"></i> {% trans %}Manage Commissions{% endtrans %}
                     </a>
                     <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-outline-success">
-                        <i class="bi bi-calendar-plus"></i> New Reservation
+                        <i class="bi bi-calendar-plus"></i> {% trans %}New Reservation{% endtrans %}
                     </a>
                     <a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-info">
-                        <i class="bi bi-calendar-today"></i> Today's Schedule
+                        <i class="bi bi-calendar-today"></i> {% trans %}Today's Schedule{% endtrans %}
                     </a>
                     <a href="{{ url_for('genetic_algorithm_web.genetic_optimizer') }}" class="btn btn-info text-white">
-                        <i class="bi bi-cpu"></i> AI Room Optimizer
+                        <i class="bi bi-cpu"></i> {% trans %}AI Room Optimizer{% endtrans %}
                     </a>
                     <a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-secondary">
-                        <i class="bi bi-calendar3"></i> View Calendar
+                        <i class="bi bi-calendar3"></i> {% trans %}View Calendar{% endtrans %}
                     </a>
                 </div>
             </div>
@@ -138,10 +138,10 @@
             <div class="card-header bg-white border-0">
                 <div class="d-flex justify-content-between align-items-center">
                     <h5 class="mb-0">
-                        <i class="bi bi-clock-history text-info"></i> Upcoming Reservations (Next 7 Days)
+                        <i class="bi bi-clock-history text-info"></i> {% trans %}Upcoming Reservations (Next 7 Days){% endtrans %}
                     </h5>
                     <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-sm btn-outline-primary">
-                        View All
+                        {% trans %}View All{% endtrans %}
                     </a>
                 </div>
             </div>
@@ -151,19 +151,19 @@
                         <table class="table table-hover">
                             <thead>
                                 <tr>
-                                    <th>Date & Time</th>
-                                    <th>Classroom</th>
-                                    <th>Subject</th>
-                                    <th>Teacher</th>
-                                    <th>Status</th>
-                                    <th>Actions</th>
+                                    <th>{% trans %}Date & Time{% endtrans %}</th>
+                                    <th>{% trans %}Classroom{% endtrans %}</th>
+                                    <th>{% trans %}Subject{% endtrans %}</th>
+                                    <th>{% trans %}Teacher{% endtrans %}</th>
+                                    <th>{% trans %}Status{% endtrans %}</th>
+                                    <th>{% trans %}Actions{% endtrans %}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for reservation in upcoming_reservations %}
                                 <tr>
                                     <td>{{ reservation.start_time.strftime('%Y-%m-%d %H:%M') }}</td>
-<td>{{ reservation.classroom.code }}</td>
+                                    <td>{{ reservation.classroom.code }}</td>
                                     <td>{{ reservation.commission.get_full_code() }}</td>
                                     <td>{{ reservation.commission.teacher_name }}</td>
                                     <td>
@@ -174,7 +174,7 @@
                                     <td>
                                         <a href="{{ url_for('schedule.list_reservations') }}" 
                                            class="btn btn-sm btn-outline-primary">
-                                            <i class="bi bi-eye"></i> View
+                                            <i class="bi bi-eye"></i> {% trans %}View{% endtrans %}
                                         </a>
                                     </td>
                                 </tr>
@@ -185,7 +185,7 @@
                 {% else %}
                     <div class="text-center py-4">
                         <i class="bi bi-calendar-x text-muted" style="font-size: 3rem;"></i>
-                        <p class="text-muted mt-3">No upcoming reservations in the next 7 days</p>
+                        <p class="text-muted mt-3">{% trans %}No upcoming reservations in the next 7 days{% endtrans %}</p>
                     </div>
                 {% endif %}
             </div>

app/templates/genetic_optimizer.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}AI Room Reservation Optimizer{% endblock %}
+{% block title %}{% trans %}AI Room Reservation Optimizer{% endtrans %} - Edu-Space Admin{% endblock %}
 
 {% block extra_css %}
 <style>
@@ -13,27 +13,24 @@
 }
 
 .commission-item {
-    border-left: 4px solid #007bff;
+    border-left: 4px solid var(--bs-primary);
     transition: all 0.2s ease;
+    background-color: var(--bs-body-bg);
 }
 
 .commission-item:hover {
-    border-left-color: #0056b3;
-    background-color: #f8f9fa;
+    border-left-color: var(--bs-info);
+    background-color: rgba(var(--bs-primary-rgb), 0.05);
 }
 
 .commission-item.selected {
-    border-left-color: #28a745;
-    background-color: #d4edda;
+    border-left-color: var(--bs-success);
+    background-color: rgba(var(--bs-success-rgb), 0.1);
 }
 
 .algorithm-status {
     position: sticky;
-    top: 20px;
-}
-
-.loading-spinner {
-    display: none;
+    top: 90px;
 }
 
 .spinner-overlay {
@@ -42,99 +39,93 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.7);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }
 
-.fitness-meter {
-    height: 20px;
-    background: linear-gradient(to right, #dc3545, #ffc107, #28a745);
-    border-radius: 10px;
-    position: relative;
-}
-
-.fitness-indicator {
-    position: absolute;
-    top: -5px;
-    width: 30px;
-    height: 30px;
-    background: white;
-    border: 3px solid #007bff;
-    border-radius: 50%;
-    transform: translateX(-50%);
-    transition: left 0.5s ease;
+.hero-banner {
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
 }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="container-fluid pt-5 mt-4">
     <!-- Header -->
     <div class="row mb-4">
         <div class="col-12">
-            <div class="card bg-primary text-white">
+            <div class="card hero-banner border-0 shadow-sm p-3">
                 <div class="card-body">
-                    <h1 class="card-title mb-3">
-                        <i class="fas fa-brain me-2"></i>
-                        AI Room Reservation Optimizer
-                    </h1>
-                    <p class="card-text mb-0">
-                        Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.
-                    </p>
+                    <div class="d-flex align-items-center mb-2">
+                        <div class="bg-primary bg-opacity-25 rounded-3 p-3 me-3 text-primary">
+                            <i class="bi bi-cpu fs-2"></i>
+                        </div>
+                        <div>
+                            <h1 class="h3 mb-1 fw-bold">
+                                {% trans %}AI Room Reservation Optimizer{% endtrans %}
+                            </h1>
+                            <p class="text-muted mb-0">
+                                {% trans %}Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.{% endtrans %}
+                            </p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Algorithm Status Card -->
+    <!-- Algorithm Status & Commission Selection -->
     <div class="row mb-4">
-        <div class="col-lg-4">
-            <div class="card algorithm-status">
-                <div class="card-header bg-info text-white">
-                    <h5 class="mb-0">
-                        <i class="fas fa-cogs me-2"></i>
-                        Algorithm Status
+        <!-- Algorithm Status Card -->
+        <div class="col-lg-4 mb-4">
+            <div class="card border-0 shadow-sm algorithm-status">
+                <div class="card-header bg-body-tertiary border-0 py-3">
+                    <h5 class="mb-0 h6 fw-bold">
+                        <i class="bi bi-gear-wide-connected text-primary me-2"></i>
+                        {% trans %}Algorithm Status{% endtrans %}
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="mb-3">
-                        <small class="text-muted">System Status</small>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Available Classrooms</span>
+                    <div class="mb-4">
+                        <small class="text-muted text-uppercase fw-semibold d-block mb-2">{% trans %}System Status{% endtrans %}</small>
+                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
+                            <span>{% trans %}Available Classrooms{% endtrans %}</span>
                             <span class="badge bg-success" id="available-classrooms">--</span>
                         </div>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Active Commissions</span>
+                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
+                            <span>{% trans %}Active Commissions{% endtrans %}</span>
                             <span class="badge bg-info" id="active-commissions">--</span>
                         </div>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Existing Reservations</span>
+                        <div class="d-flex justify-content-between align-items-center py-1">
+                            <span>{% trans %}Existing Reservations{% endtrans %}</span>
                             <span class="badge bg-secondary" id="existing-reservations">--</span>
                         </div>
                     </div>
                     
-                    <div class="mb-3">
-                        <small class="text-muted">Algorithm Configuration</small>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Population Size</span>
+                    <div class="mb-4">
+                        <small class="text-muted text-uppercase fw-semibold d-block mb-2">{% trans %}Algorithm Configuration{% endtrans %}</small>
+                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
+                            <span>{% trans %}Population Size{% endtrans %}</span>
                             <span class="text-muted">50</span>
                         </div>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Generations</span>
+                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
+                            <span>{% trans %}Generations{% endtrans %}</span>
                             <span class="text-muted">100</span>
                         </div>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span>Mutation Rate</span>
+                        <div class="d-flex justify-content-between align-items-center py-1">
+                            <span>{% trans %}Mutation Rate{% endtrans %}</span>
                             <span class="text-muted">10%</span>
                         </div>
                     </div>
                     
                     <button class="btn btn-sm btn-outline-primary w-100" onclick="geneticManager.getAlgorithmStatus()">
-                        <i class="fas fa-sync-alt me-1"></i>
-                        Refresh Status
+                        <i class="bi bi-arrow-clockwise me-1"></i>
+                        {% trans %}Refresh Status{% endtrans %}
                     </button>
                 </div>
             </div>
@@ -142,34 +133,27 @@
 
         <!-- Commission Selection -->
         <div class="col-lg-8">
-            <div class="card">
-                <div class="card-header bg-light">
-                    <h5 class="mb-0">
-                        <i class="fas fa-list-check me-2"></i>
-                        Select Commissions to Optimize
+            <div class="card border-0 shadow-sm">
+                <div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 h6 fw-bold">
+                        <i class="bi bi-list-check text-primary me-2"></i>
+                        {% trans %}Select Commissions to Optimize{% endtrans %}
                     </h5>
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
+                            {% trans %}Select All{% endtrans %}
+                        </button>
+                        <button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
+                            {% trans %}Deselect All{% endtrans %}
+                        </button>
+                    </div>
                 </div>
                 <div class="card-body">
-                    <div class="mb-3">
-                        <div class="d-flex gap-2 mb-2">
-                            <button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
-                                Select All
-                            </button>
-                            <button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
-                                Deselect All
-                            </button>
-                            <button class="btn btn-sm btn-outline-info" onclick="filterCommissions()">
-                                <i class="fas fa-filter me-1"></i>
-                                Filter
-                            </button>
-                        </div>
-                    </div>
-                    
                     <div id="commissions-list" class="row">
                         <!-- Commissions will be loaded here -->
-                        <div class="col-12 text-center text-muted">
-                            <i class="fas fa-spinner fa-spin me-2"></i>
-                            Loading commissions...
+                        <div class="col-12 text-center text-muted py-5">
+                            <div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
+                            {% trans %}Loading commissions...{% endtrans %}
                         </div>
                     </div>
                 </div>
@@ -180,45 +164,45 @@
     <!-- Optimization Controls -->
     <div class="row mb-4">
         <div class="col-12">
-            <div class="card">
-                <div class="card-header bg-primary text-white">
-                    <h5 class="mb-0">
-                        <i class="fas fa-play-circle me-2"></i>
-                        Optimization Controls
+            <div class="card border-0 shadow-sm">
+                <div class="card-header bg-body-tertiary border-0 py-3">
+                    <h5 class="mb-0 h6 fw-bold">
+                        <i class="bi bi-sliders text-primary me-2"></i>
+                        {% trans %}Optimization Controls{% endtrans %}
                     </h5>
                 </div>
                 <div class="card-body">
-                    <div class="row align-items-center">
+                    <div class="row align-items-center mb-3">
                         <div class="col-md-6">
                             <div class="mb-3">
-                                <label for="start-date" class="form-label">Start Date Range</label>
+                                <label for="start-date" class="form-label">{% trans %}Start Date Range{% endtrans %}</label>
                                 <input type="datetime-local" class="form-control" id="start-date" name="start_date">
                             </div>
                         </div>
                         <div class="col-md-6">
                             <div class="mb-3">
-                                <label for="end-date" class="form-label">End Date Range</label>
+                                <label for="end-date" class="form-label">{% trans %}End Date Range{% endtrans %}</label>
                                 <input type="datetime-local" class="form-control" id="end-date" name="end_date">
                             </div>
                         </div>
                     </div>
                     
                     <div class="d-flex gap-2 flex-wrap">
-                        <button class="btn btn-info" id="preview-optimization-btn">
-                            <i class="fas fa-eye me-2"></i>
-                            Preview Optimization
+                        <button class="btn btn-info text-white" id="preview-optimization-btn">
+                            <i class="bi bi-eye me-1"></i>
+                            {% trans %}Preview Optimization{% endtrans %}
                         </button>
                         <button class="btn btn-success" id="optimize-assignments-btn">
-                            <i class="fas fa-rocket me-2"></i>
-                            Run Full Optimization
+                            <i class="bi bi-play-circle me-1"></i>
+                            {% trans %}Run Full Optimization{% endtrans %}
                         </button>
                         <button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
-                            <i class="fas fa-check me-2"></i>
-                            Apply Reservations
+                            <i class="bi bi-check-circle me-1"></i>
+                            {% trans %}Apply Reservations{% endtrans %}
                         </button>
-                        <button class="btn btn-secondary" onclick="resetOptimization()">
-                            <i class="fas fa-undo me-2"></i>
-                            Reset
+                        <button class="btn btn-outline-secondary" onclick="resetOptimization()">
+                            <i class="bi bi-arrow-counterclockwise me-1"></i>
+                            {% trans %}Reset{% endtrans %}
                         </button>
                     </div>
                 </div>
@@ -229,13 +213,8 @@
     <!-- Results Section -->
     <div class="row mb-4">
         <div class="col-12">
-            <!-- Preview Results -->
             <div id="preview-results"></div>
-            
-            <!-- Optimization Results -->
             <div id="optimization-results"></div>
-            
-            <!-- Alert Container -->
             <div id="alert-container"></div>
         </div>
     </div>
@@ -244,11 +223,9 @@
 <!-- Loading Spinner Overlay -->
 <div class="spinner-overlay" id="loading-spinner">
     <div class="text-center text-white">
-        <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
-            <span class="visually-hidden">Optimizing...</span>
-        </div>
-        <p class="mt-3 mb-0">Running genetic algorithm optimization...</p>
-        <small class="d-block mt-2">This may take a few moments</small>
+        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>
+        <p class="mt-3 mb-1 fw-bold fs-5">{% trans %}Running genetic algorithm optimization...{% endtrans %}</p>
+        <small class="text-white-50">{% trans %}This may take a few moments{% endtrans %}</small>
     </div>
 </div>
 
@@ -257,17 +234,17 @@
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="detailsModalLabel">Reservation Details</h5>
+                <h5 class="modal-title" id="detailsModalLabel">{% trans %}Reservation Details{% endtrans %}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <!-- Content will be populated dynamically -->
+                <!-- Content populated dynamically -->
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Close{% endtrans %}</button>
                 <button type="button" class="btn btn-primary" onclick="downloadReservations()">
-                    <i class="fas fa-download me-2"></i>
-                    Download
+                    <i class="bi bi-download me-1"></i>
+                    {% trans %}Download{% endtrans %}
                 </button>
             </div>
         </div>
@@ -278,7 +255,6 @@
 {% block extra_js %}
 <script src="{{ url_for('static', filename='js/genetic-algorithm.js') }}"></script>
 <script>
-// Additional utility functions for the genetic optimizer interface
 function selectAllCommissions() {
     const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
     checkboxes.forEach(cb => {
@@ -306,78 +282,45 @@ function updateCommissionCard(commissionId, selected) {
     }
 }
 
-function filterCommissions() {
-    // Implement filtering logic
-    console.log('Filter commissions feature not implemented yet');
-}
-
 function resetOptimization() {
     deselectAllCommissions();
-    geneticManager.clearResults();
-    geneticManager.clearPreview();
+    if (window.geneticManager) {
+        geneticManager.clearResults && geneticManager.clearResults();
+        geneticManager.clearPreview && geneticManager.clearPreview();
+    }
     document.getElementById('start-date').value = '';
     document.getElementById('end-date').value = '';
 }
 
-function downloadReservations() {
-    const reservations = geneticManager.getPendingReservations();
-    if (!reservations || reservations.length === 0) {
-        alert('No reservations to download');
-        return;
-    }
-    
-    // Create CSV content
-    const headers = ['Commission ID', 'Classroom ID', 'Purpose', 'Start Time', 'End Time', 'Expected Attendees'];
-    const csvContent = [
-        headers.join(','),
-        ...reservations.map(res => [
-            res.commission_id,
-            res.classroom_id,
-            `"${res.purpose}"`,
-            new Date(res.start_time).toISOString(),
-            new Date(res.end_time).toISOString(),
-            res.expected_attendees
-        ].join(','))
-    ].join('\n');
-    
-    // Download file
-    const blob = new Blob([csvContent], { type: 'text/csv' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `optimization_results_${new Date().toISOString().split('T')[0]}.csv`;
-    a.click();
-    URL.revokeObjectURL(url);
-}
-
-// Load commissions on page load
 document.addEventListener('DOMContentLoaded', async function() {
     await loadCommissions();
-    await geneticManager.getAlgorithmStatus();
+    if (window.geneticManager) {
+        await geneticManager.getAlgorithmStatus();
+    }
 });
 
 async function loadCommissions() {
     try {
-const response = await fetch('/api/genetic/commissions');
+        const response = await fetch('/api/genetic/commissions');
         const data = await response.json();
-        
         const commissionsList = document.getElementById('commissions-list');
+        const isSpanish = '{{ session.get("language", "es") }}' === 'es';
         
         if (data.success && data.commissions && data.commissions.length > 0) {
             const commissionsHtml = data.commissions.map(commission => `
                 <div class="col-md-6 mb-3">
-                    <div class="card commission-item" data-commission-id="${commission.id}">
+                    <div class="card commission-item border-0 shadow-sm" data-commission-id="${commission.id}">
                         <div class="card-body">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" name="commission_ids" 
                                        value="${commission.id}" id="commission-${commission.id}"
                                        onchange="updateCommissionCard('${commission.id}', this.checked)">
                                 <label class="form-check-label" for="commission-${commission.id}">
-                                    <strong>${commission.get_full_code || commission.code}</strong>
+                                    <strong class="text-primary">${commission.get_full_code || commission.code}</strong>
                                     <br>
-                                    <small class="text-muted">${commission.subject?.name || 'Unknown Subject'}</small>
+                                    <small class="text-muted">${commission.subject?.name || (isSpanish ? 'Materia Desconocida' : 'Unknown Subject')}</small>
                                     <br>
-                                    <span class="badge bg-info">${commission.current_students || 0}/${commission.max_students} students</span>
+                                    <span class="badge bg-info mt-1">${commission.current_students || 0}/${commission.max_students} ${isSpanish ? 'estudiantes' : 'students'}</span>
                                     ${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
                                 </label>
                             </div>
@@ -389,46 +332,21 @@ const response = await fetch('/api/genetic/commissions');
             commissionsList.innerHTML = commissionsHtml;
         } else {
             commissionsList.innerHTML = `
-                <div class="col-12 text-center text-muted">
-                    <i class="fas fa-info-circle me-2"></i>
-                    No active commissions found.
+                <div class="col-12 text-center text-muted py-5">
+                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
+                    ${isSpanish ? 'No se encontraron comisiones activas.' : 'No active commissions found.'}
                 </div>
             `;
         }
     } catch (error) {
         console.error('Error loading commissions:', error);
         document.getElementById('commissions-list').innerHTML = `
-            <div class="col-12 text-center text-danger">
-                <i class="fas fa-exclamation-triangle me-2"></i>
-                Error loading commissions: ${error.message}
+            <div class="col-12 text-center text-danger py-4">
+                <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
+                Error al cargar comisiones: ${error.message}
             </div>
         `;
     }
 }
-
-// Override the genetic algorithm status handler
-const originalGetAlgorithmStatus = geneticManager.getAlgorithmStatus;
-geneticManager.getAlgorithmStatus = async function() {
-    try {
-        const result = await originalGetAlgorithmStatus.call(this);
-        
-        if (result.success) {
-            const data = result.data;
-            document.getElementById('available-classrooms').textContent = data.system_status.available_classrooms;
-            document.getElementById('active-commissions').textContent = data.system_status.active_commissions;
-            document.getElementById('existing-reservations').textContent = data.system_status.confirmed_reservations;
-        }
-    } catch (error) {
-        console.error('Error updating algorithm status:', error);
-    }
-};
-
-// Override the loading function to use our custom spinner
-geneticManager.showLoading = function(show) {
-    const spinner = document.getElementById('loading-spinner');
-    if (spinner) {
-        spinner.style.display = show ? 'flex' : 'none';
-    }
-};
 </script>
 {% endblock %}

app/templates/partials/language_switcher.html

@@ -1,9 +1,9 @@
 {% if config.LANGUAGES|length > 1 %}
 <div class="dropdown language-switcher">
     <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-        <i class="bi bi-globe"></i>
+        <i class="bi bi-globe me-1"></i>
         {% if session.language == 'es' or (session.language is none and request.accept_languages.best_match(['es', 'en']) == 'es') %}
-            Spanish
+            Español
         {% else %}
             English
         {% endif %}

app/templates/schedule/calendar.html

@@ -1,31 +1,32 @@
 {% extends "base.html" %}
 
-{% block title %}Schedule Calendar - Edu-Space Admin{% endblock %}
+{% block title %}{% trans %}Reservations Calendar{% endtrans %} - Edu-Space Admin{% endblock %}
 
 {% block content %}
+<div class="container-fluid pt-5 mt-4">
 <div class="row mb-4">
     <div class="col-12">
         <h1 class="h3 mb-0">
-            <i class="bi bi-calendar3 text-primary"></i> Schedule Calendar
-            <small class="text-muted ms-2">View & Manage Reservations</small>
+            <i class="bi bi-calendar3 text-primary"></i> {% trans %}Reservations Calendar{% endtrans %}
+            <small class="text-muted ms-2">{% trans %}View & Manage Reservations{% endtrans %}</small>
         </h1>
     </div>
 </div>
 
 <div class="card border-0 shadow-sm">
-    <div class="card-header bg-white border-0">
+    <div class="card-header bg-body-tertiary border-0 py-3">
         <div class="row align-items-center">
             <div class="col-md-6">
-                <h5 class="mb-0">
-                    <i class="bi bi-calendar-week text-info"></i> Reservations Calendar
+                <h5 class="mb-0 h6 fw-bold">
+                    <i class="bi bi-calendar-week text-info me-2"></i> {% trans %}Reservations Calendar{% endtrans %}
                 </h5>
             </div>
             <div class="col-md-6 text-end">
                 <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-primary">
-                    <i class="bi bi-plus-circle"></i> Add Reservation
+                    <i class="bi bi-plus-circle"></i> {% trans %}Add Reservation{% endtrans %}
                 </a>
                 <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
-                    <i class="bi bi-list"></i> List View
+                    <i class="bi bi-list"></i> {% trans %}List View{% endtrans %}
                 </a>
             </div>
         </div>
@@ -36,11 +37,11 @@
             <div class="d-flex gap-3 flex-wrap">
                 <div class="d-flex align-items-center">
                     <span class="badge bg-success me-2" style="width: 20px; height: 20px;"></span>
-                    <small class="text-muted">Confirmed</small>
+                    <small class="text-muted">{% trans %}Confirmed{% endtrans %}</small>
                 </div>
                 <div class="d-flex align-items-center">
                     <span class="badge bg-warning me-2" style="width: 20px; height: 20px;"></span>
-                    <small class="text-muted">Pending</small>
+                    <small class="text-muted">{% trans %}Pending{% endtrans %}</small>
                 </div>
             </div>
         </div>
@@ -55,18 +56,19 @@
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Reservation Details</h5>
+                <h5 class="modal-title">{% trans %}Reservation Details{% endtrans %}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body" id="reservationDetails">
                 <!-- Content will be loaded dynamically -->
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Close{% endtrans %}</button>
             </div>
         </div>
     </div>
 </div>
+</div>
 {% endblock %}
 
 {% block extra_css %}
@@ -95,11 +97,14 @@
 
 {% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales-all.min.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     var calendarEl = document.getElementById('calendar');
+    var currentLang = '{{ session.get("language", "es") }}';
     
     var calendar = new FullCalendar.Calendar(calendarEl, {
+        locale: currentLang,
         initialView: 'timeGridWeek',
         headerToolbar: {
             left: 'prev,next today',
@@ -115,16 +120,13 @@ document.addEventListener('DOMContentLoaded', function() {
         slotMaxTime: '22:00:00',
         height: 'auto',
         eventClick: function(info) {
-            // Prevent default link behavior
             if (info.event.url) {
-                // Load reservation details in modal instead of navigation
                 loadReservationDetails(info.event.url);
                 return false;
             }
         },
         events: '{{ url_for("schedule.calendar_data") }}',
         loading: function(bool) {
-            // Show loading indicator if needed
         }
     });
     
@@ -133,38 +135,39 @@ document.addEventListener('DOMContentLoaded', function() {
     function loadReservationDetails(url) {
         $.get(url)
             .done(function(data) {
+                var isEs = currentLang === 'es';
                 var html = `
                     <div class="row">
                         <div class="col-md-6">
-                            <h6 class="text-muted mb-2">Classroom</h6>
-                            <p class="fw-bold">${data.classroom.code} - ${data.classroom.name}</p>
-                            <p><i class="bi bi-building text-primary"></i> ${data.classroom.building} - Floor ${data.classroom.floor}</p>
+                            <h6 class="text-muted mb-2">${isEs ? 'Aula' : 'Classroom'}</h6>
+                            <p class="fw-bold">${data.classroom.code} - ${data.classroom.name || ''}</p>
+                            <p><i class="bi bi-building text-primary"></i> ${data.classroom.building} - ${isEs ? 'Piso' : 'Floor'} ${data.classroom.floor}</p>
                         </div>
                         <div class="col-md-6">
-                            <h6 class="text-muted mb-2">Subject</h6>
+                            <h6 class="text-muted mb-2">${isEs ? 'Materia' : 'Subject'}</h6>
                             <p class="fw-bold">${data.commission.subject.code} - ${data.commission.subject.name}</p>
                             <p><i class="bi bi-person text-info"></i> ${data.commission.teacher_name}</p>
                         </div>
                     </div>
                     <div class="row mt-3">
                         <div class="col-md-6">
-                            <h6 class="text-muted mb-2">Schedule</h6>
+                            <h6 class="text-muted mb-2">${isEs ? 'Horario' : 'Schedule'}</h6>
                             <p><i class="bi bi-clock text-warning"></i> ${new Date(data.start_time).toLocaleString()}</p>
                             <p><i class="bi bi-clock text-success"></i> ${new Date(data.end_time).toLocaleString()}</p>
                         </div>
                         <div class="col-md-6">
-                            <h6 class="text-muted mb-2">Details</h6>
-                            <p><i class="bi bi-people text-primary"></i> ${data.expected_attendees} attendees</p>
+                            <h6 class="text-muted mb-2">${isEs ? 'Detalles' : 'Details'}</h6>
+                            <p><i class="bi bi-people text-primary"></i> ${data.expected_attendees} ${isEs ? 'asistentes' : 'attendees'}</p>
                             <p><span class="badge bg-${data.status === 'CONFIRMED' ? 'success' : 'warning'}">${data.status}</span></p>
                         </div>
                     </div>
-                    ${data.notes ? `<div class="row mt-3"><div class="col-12"><h6 class="text-muted mb-2">Notes</h6><p>${data.notes}</p></div></div>` : ''}
+                    ${data.notes ? `<div class="row mt-3"><div class="col-12"><h6 class="text-muted mb-2">${isEs ? 'Notas' : 'Notes'}</h6><p>${data.notes}</p></div></div>` : ''}
                 `;
                 $('#reservationDetails').html(html);
                 $('#reservationModal').modal('show');
             })
             .fail(function() {
-                $('#reservationDetails').html('<p class="text-danger">Error loading reservation details.</p>');
+                $('#reservationDetails').html('<p class="text-danger">${isEs ? "Error al cargar los detalles de la reserva." : "Error loading reservation details."}</p>');
                 $('#reservationModal').modal('show');
             });
     }

app/templates/schedule/commissions.html

@@ -168,7 +168,7 @@
                 {% if subject.description %}
                 <div class="card-footer bg-light">
                     <small class="text-muted">
-                        <i class="bi bi-info-circle"></i> {{ subject.description|truncatewords(20) }}
+                        <i class="bi bi-info-circle"></i> {{ subject.description|truncate(100) }}
                     </small>
                 </div>
                 {% endif %}
@@ -180,8 +180,8 @@
                 <i class="bi bi-inbox fs-1 text-muted d-block mb-3"></i>
                 <h4 class="text-muted">No Subjects Found</h4>
                 <p class="text-muted">There are no active subjects in the system.</p>
-                <a href="{{ url_for('classrooms.index') }}" class="btn btn-primary">
-                    <i class="bi bi-plus-circle"></i> Add New Subject
+                <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-primary">
+                    <i class="bi bi-door-open"></i> View Classrooms
                 </a>
             </div>
         </div>

app/templates/schedule/today.html

@@ -8,20 +8,19 @@
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 class="h3">
-                <i class="bi bi-calendar-today text-info"></i> Today's Schedule
+                <i class="bi bi-calendar-today text-info"></i> {% trans %}Today's Schedule{% endtrans %}
                 <small class="text-muted ms-2">{{ today.strftime('%B %d, %Y') }}</small>
             </h1>
-<div>
+            <div>
                 <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success">
-                    <i class="bi bi-plus-circle"></i> New Reservation
+                    <i class="bi bi-plus-circle"></i> {% trans %}New Reservation{% endtrans %}
                 </a>
                 <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-primary ms-2">
-                    <i class="bi bi-list"></i> All Reservations
+                    <i class="bi bi-list"></i> {% trans %}All Reservations{% endtrans %}
                 </a>
-{# Access to Genetic Algorithm Optimizer - Only for admin/teacher roles #}
                 {% if current_user and current_user.role in ['admin', 'teacher'] %}
-<a href="{{ url_for('main.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
-                    <i class="bi bi-cpu"></i> AI Optimizer
+                <a href="{{ url_for('genetic_algorithm_web.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
+                    <i class="bi bi-cpu"></i> {% trans %}AI Room Optimizer{% endtrans %}
                 </a>
                 {% endif %}
             </div>
@@ -36,7 +35,7 @@
             <div class="card-body">
                 <div class="d-flex justify-content-between align-items-center">
                     <div>
-                        <h6 class="text-muted mb-2">Total Reservations</h6>
+                        <h6 class="text-muted mb-2">{% trans %}Total Reservations{% endtrans %}</h6>
                         <h2 class="mb-0">{{ stats.total_reservations }}</h2>
                     </div>
                     <div class="bg-info bg-opacity-10 rounded-circle p-3">
@@ -52,7 +51,7 @@
             <div class="card-body">
                 <div class="d-flex justify-content-between align-items-center">
                     <div>
-                        <h6 class="text-muted mb-2">Confirmed</h6>
+                        <h6 class="text-muted mb-2">{% trans %}Confirmed{% endtrans %}</h6>
                         <h2 class="mb-0">{{ stats.confirmed }}</h2>
                     </div>
                     <div class="bg-success bg-opacity-10 rounded-circle p-3">
@@ -68,7 +67,7 @@
             <div class="card-body">
                 <div class="d-flex justify-content-between align-items-center">
                     <div>
-                        <h6 class="text-muted mb-2">Pending</h6>
+                        <h6 class="text-muted mb-2">{% trans %}Pending{% endtrans %}</h6>
                         <h2 class="mb-0">{{ stats.pending }}</h2>
                     </div>
                     <div class="bg-warning bg-opacity-10 rounded-circle p-3">
@@ -84,7 +83,7 @@
             <div class="card-body">
                 <div class="d-flex justify-content-between align-items-center">
                     <div>
-                        <h6 class="text-muted mb-2">Active Classrooms</h6>
+                        <h6 class="text-muted mb-2">{% trans %}Active Classrooms{% endtrans %}</h6>
                         <h2 class="mb-0">{{ stats.occupied_classrooms }}/{{ stats.total_classrooms }}</h2>
                     </div>
                     <div class="bg-primary bg-opacity-10 rounded-circle p-3">
@@ -340,21 +339,20 @@
     <div class="col-12">
         <div class="text-center py-5">
             <i class="bi bi-calendar-x text-muted" style="font-size: 4rem;"></i>
-            <h4 class="mt-3 text-muted">No reservations scheduled for today</h4>
+            <h4 class="mt-3 text-muted">{% trans %}No reservations scheduled for today{% endtrans %}</h4>
             <p class="text-muted">
-                There are no classroom reservations for {{ today.strftime('%B %d, %Y') }}.
+                {% trans %}There are no classroom reservations for today.{% endtrans %}
             </p>
-<div class="mt-3">
+            <div class="mt-3">
                 <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success">
-                    <i class="bi bi-plus-circle"></i> Schedule First Class
+                    <i class="bi bi-plus-circle"></i> {% trans %}Schedule First Class{% endtrans %}
                 </a>
                 <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-primary ms-2">
-                    <i class="bi bi-calendar-week"></i>View Week Schedule
+                    <i class="bi bi-calendar-week"></i> {% trans %}View Week Schedule{% endtrans %}
                 </a>
-{# Access to Genetic Algorithm Optimizer - Only for admin/teacher roles #}
                 {% if current_user and current_user.role in ['admin', 'teacher'] %}
-<a href="{{ url_for('main.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
-                    <i class="bi bi-cpu"></i> AI Room Optimizer
+                <a href="{{ url_for('genetic_algorithm_web.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
+                    <i class="bi bi-cpu"></i> {% trans %}AI Room Optimizer{% endtrans %}
                 </a>
                 {% endif %}
             </div>