workspace/projects/gamilit/docs/frontend/teacher/pages/TEACHER-PAGES-SPECIFICATIONS.md

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
TeacherReportsPage	Activo	ReportCharts, StatsGrid
TeacherClassesPage	Activo	ClassSelector, ClassDetails
TeacherStudentsPage	Activo	StudentsList, StudentFilters
TeacherAnalyticsPage	Activo	AnalyticsCharts, EconomyStats

---

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

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                  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

Constantes Centralizadas (P2-02)

La pagina usa constantes importadas desde ../constants/alertTypes:

import { ALERT_TYPES, ALERT_PRIORITIES } from '../constants/alertTypes';

// Uso en componente
const alertTypes = ALERT_TYPES;
const priorities = ALERT_PRIORITIES;

Tipos de Alerta

Tipo	Descripcion	Icono
no_activity	Estudiantes inactivos >7 dias	emoji_events
low_score	Promedio <60%	emoji_events
declining_trend	Rendimiento en declive	emoji_events
repeated_failures	Multiples intentos fallidos	emoji_events

Prioridades

Prioridad	Label	Color
critical	Critica	bg-red-500
high	Alta	bg-orange-500
medium	Media	bg-yellow-500
low	Baja	bg-blue-500

---

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

const SHOW_UNDER_CONSTRUCTION = true;

---

8. TeacherResourcesPage

Ubicacion: pages/TeacherResourcesPage.tsx Estado: Placeholder

• Muestra componente UnderConstruction
• Feature para futuras versiones

---

9. TeacherReportsPage

Ubicacion: pages/TeacherReportsPage.tsx Rol: Generacion y visualizacion de reportes

Estructura

┌─────────────────────────────────────────────────────────┐
│                     HEADER                               │
│  [FileText Icon] Reportes y Analiticas                  │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │          [MOCK DATA BANNER - conditional]       │   │
│  │  (Shown when API fails and using demo data)     │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         TABS: Overview | Details | Export       │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              STATS GRID                         │   │
│  │  [Total] [Activos] [Promedio] [Pendientes]      │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              CHARTS SECTION                     │   │
│  │  - Progress by Module                           │   │
│  │  - Weekly Trends                                │   │
│  │  - Score Distribution                           │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

Estado de Mock Data (P0-02)

Cuando la API falla, la pagina activa un modo de datos de demostracion:

const [isUsingMockData, setIsUsingMockData] = useState(false);

// En cada catch block:
try {
  const data = await api.fetchStats();
  setStats(data);
} catch (error) {
  console.error('API failed, using mock data');
  setIsUsingMockData(true);
  setStats(MOCK_STATS);
}

Banner Visual de Mock Data

Cuando isUsingMockData === true:

{isUsingMockData && (
  <div className="bg-yellow-100 border-l-4 border-yellow-500 p-4">
    <div className="flex items-center">
      <InfoIcon className="h-5 w-5 text-yellow-500 mr-2" />
      <p className="text-yellow-700">
        Datos de Demostracion - No se pudo conectar al servidor
      </p>
    </div>
  </div>
)}

---

LAYOUT COMPARTIDO

TeacherLayout

Props:

interface TeacherLayoutProps {
  children: React.ReactNode;
  user?: User;
  gamificationData: GamificationData;
  organizationName: string;  // P1-01: Dynamic organization name
  onLogout: () => void;
}

Estructura:

• Header con titulo y nombre de organizacion
• Navegacion lateral (si aplica)
• Contenido principal
• Footer (opcional)

Nombre de Organizacion Dinamico (P1-01)

Todas las paginas del Teacher Portal ahora pasan el nombre de organizacion de forma dinamica:

<TeacherLayout
  user={user ?? undefined}
  gamificationData={displayGamificationData}
  organizationName={user?.organization?.name || 'Mi Institucion'}
  onLogout={handleLogout}
>

Paginas actualizadas con organizationName dinamico:

• TeacherClassesPage
• TeacherMonitoringPage
• TeacherAssignmentsPage
• TeacherExerciseResponsesPage
• TeacherAlertsPage
• TeacherProgressPage
• TeacherStudentsPage
• TeacherAnalyticsPage
• TeacherResourcesPage
• TeacherReportsPage

---

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
/teacher/reports	TeacherReportsPage
/teacher/classes	TeacherClassesPage
/teacher/students	TeacherStudentsPage
/teacher/analytics	TeacherAnalyticsPage

---

REFERENCIAS

• TEACHER-MONITORING-COMPONENTS.md
• TEACHER-RESPONSE-MANAGEMENT.md
• TEACHER-TYPES-REFERENCE.md
• TEACHER-CONSTANTS-REFERENCE.md

---

Ultima actualizacion: 2025-12-26