# Especificaciones de Paginas - Teacher Portal

**Version:** 1.0.0
**Fecha:** 2025-12-18
**Modulo:** Teacher Portal

---

## INDICE DE PAGINAS

| Pagina | Estado | Componentes Principales |
|--------|--------|------------------------|
| TeacherDashboard | Activo | Tabs, StudentMonitoringPanel |
| TeacherMonitoringPage | Activo | StudentMonitoringPanel |
| TeacherExerciseResponsesPage | Activo | ResponseFilters, ResponsesTable |
| TeacherProgressPage | Activo | ClassProgressDashboard |
| TeacherAlertsPage | Activo | InterventionAlertsPanel |
| TeacherAssignmentsPage | Activo | TeacherAssignments |
| TeacherContentPage | Under Construction | - |
| TeacherResourcesPage | Placeholder | UnderConstruction |

---

## 1. TeacherDashboard

**Ubicacion:** `pages/TeacherDashboard.tsx`
**Rol:** Hub central del portal de maestros

### Estructura

```
┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [Book Icon] Dashboard del Maestro                      │
│  [Selector de Clase v]                                  │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                    TABS                          │   │
│  │ [Resumen] [Monitoreo] [Progreso] [Alertas]      │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │               TAB CONTENT                        │   │
│  │  (StudentMonitoringPanel, ClassProgress, etc.)  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
```

### Tabs

| Tab | Contenido |
|-----|-----------|
| Resumen | Stats generales, alertas recientes |
| Monitoreo | StudentMonitoringPanel |
| Progreso | ClassProgressDashboard |
| Alertas | InterventionAlertsPanel |

### Estado

```typescript
const [selectedClassroom, setSelectedClassroom] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState('resumen');
```

---

## 2. TeacherMonitoringPage

**Ubicacion:** `pages/TeacherMonitoringPage.tsx`
**Rol:** Monitoreo en tiempo real de estudiantes

### Estructura

```
┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [Eye Icon] Monitoreo de Estudiantes                    │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │            SELECTOR DE CLASE                     │   │
│  │  [Clase A] [Clase B] [Clase C] ...              │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         StudentMonitoringPanel                   │   │
│  │  (Stats + Filtros + Grid/Tabla + Paginacion)    │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
```

### Caracteristicas

- Selector de clase con grid de botones
- Auto-seleccion de primera clase al cargar
- Toast para notificaciones de eventos
- RefreshControl con intervalos configurables

---

## 3. TeacherExerciseResponsesPage

**Ubicacion:** `pages/TeacherExerciseResponsesPage.tsx`
**Rol:** Revision de respuestas de ejercicios

### Estructura

```
┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [FileText Icon] Respuestas de Ejercicios               │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              STATS GRID                          │   │
│  │ [Total Intentos] [Correctos] [Incorrectos]      │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              ResponseFilters                     │   │
│  │  [Aula] [Estudiante] [Fechas] [Estado]          │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              ResponsesTable                      │   │
│  │  + Paginacion + Sorting                         │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌──────────────────────────────────────────┐          │
│  │      ResponseDetailModal (overlay)        │          │
│  └──────────────────────────────────────────┘          │
└─────────────────────────────────────────────────────────┘
```

### Stats Grid

| Stat | Valor |
|------|-------|
| Total Intentos | Conteo total |
| Correctos | Intentos correctos |
| Incorrectos | Intentos incorrectos |
| Pendientes de Revision | Requieren revision manual |

---

## 4. TeacherProgressPage

**Ubicacion:** `pages/TeacherProgressPage.tsx`
**Rol:** Seguimiento de progreso academico

### Estructura

```
┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [TrendingUp Icon] Progreso Academico                   │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │            SELECTOR DE CLASE                     │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         ClassProgressDashboard                   │   │
│  │  - Stats por modulo                             │   │
│  │  - Distribucion de scores                       │   │
│  │  - Tendencias semanales                         │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
```

---

## 5. TeacherAlertsPage

**Ubicacion:** `pages/TeacherAlertsPage.tsx`
**Rol:** Alertas de intervencion para estudiantes

### Estructura

```
┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [Bell Icon] Alertas de Intervencion                    │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              FILTROS                             │   │
│  │  [Tipo v] [Prioridad v] [Clase v]               │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         InterventionAlertsPanel                  │   │
│  │  Lista de alertas con acciones                  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
```

### Tipos de Alerta

| Tipo | Descripcion | Prioridad Default |
|------|-------------|-------------------|
| low_performance | Bajo rendimiento | Alta |
| inactivity | Inactividad prolongada | Media |
| struggling | Dificultad repetida | Alta |
| missing_assignments | Tareas faltantes | Media |
| streak_broken | Racha perdida | Baja |

---

## 6. TeacherAssignmentsPage

**Ubicacion:** `pages/TeacherAssignmentsPage.tsx`
**Rol:** Gestion de tareas asignadas

### Estructura

- Wrapper simple alrededor de `TeacherAssignments`
- Layout con TeacherLayout

---

## 7. TeacherContentPage

**Ubicacion:** `pages/TeacherContentPage.tsx`
**Estado:** Under Construction

```typescript
const SHOW_UNDER_CONSTRUCTION = true;
```

---

## 8. TeacherResourcesPage

**Ubicacion:** `pages/TeacherResourcesPage.tsx`
**Estado:** Placeholder

- Muestra componente `UnderConstruction`
- Feature para futuras versiones

---

## LAYOUT COMPARTIDO

### TeacherLayout

**Props:**
```typescript
interface TeacherLayoutProps {
  children: React.ReactNode;
  title?: string;
  subtitle?: string;
  showBackButton?: boolean;
}
```

**Estructura:**
- Header con titulo
- Navegacion lateral (si aplica)
- Contenido principal
- Footer (opcional)

---

## RUTAS

| Ruta | Pagina |
|------|--------|
| /teacher | TeacherDashboard |
| /teacher/monitoring | TeacherMonitoringPage |
| /teacher/responses | TeacherExerciseResponsesPage |
| /teacher/progress | TeacherProgressPage |
| /teacher/alerts | TeacherAlertsPage |
| /teacher/assignments | TeacherAssignmentsPage |
| /teacher/content | TeacherContentPage |
| /teacher/resources | TeacherResourcesPage |

---

## REFERENCIAS

- [TEACHER-MONITORING-COMPONENTS.md](../components/TEACHER-MONITORING-COMPONENTS.md)
- [TEACHER-RESPONSE-MANAGEMENT.md](../components/TEACHER-RESPONSE-MANAGEMENT.md)
- [TEACHER-TYPES-REFERENCE.md](../types/TEACHER-TYPES-REFERENCE.md)

---

**Ultima actualizacion:** 2025-12-18