Modal "Ver mi avance"

Componente: theme_cdigital
Figma: nodo 19723-3353
Alcance: 2 — Dashboard de aprendizaje
Estado: Estable

Propósito

Modal de progreso académico que el estudiante abre desde la vista de curso. Presenta en una sola pantalla todas las métricas de avance: progreso general, desempeño, actividades pendientes, racha de aprendizaje, progreso por módulo, últimas calificaciones y alertas académicas.

Arquitectura

core_renderer::course_progress_modal_data()   ← datos desde local_pccntr8203403_dashboard
  └── renderiza course_progress_modal.mustache
        └── 7 cards de datos + cabecera con avatar del estudiante

La modal se abre con JavaScript nativo de Moodle (sin jQuery). El trigger es el banner informativo o un botón flotante en la vista de curso.

Dimensiones: 1020 px de ancho · cards de stats máx. 230 px (Figma 19723-3353).

Cards de datos

Todas las cards consumen datos de local_pccntr8203403_dashboard\data\course_stats.

#	Card	Datos clave	Método de datos
1	Mi avance general	Porcentaje de completación + anillo de progreso SVG	`get_user_progress()`
2	Mi desempeño	Calificación final del curso (fallback `—` si no hay nota)	`get_user_course_grade()`
3	Actividades pendientes	Cantidad de actividades sin completar con fecha límite (lógica relativa invertida)	`get_pending_activities()`
4	Racha de aprendizaje	Días consecutivos con actividad en logs	`get_learning_streak()`
5	Mi progreso por módulo	Progreso por sección del curso con acordeón "Ver todos"	`get_user_module_progress()`
6	Últimas calificaciones	Lista de calificaciones recientes (módulo, nota, fecha)	`get_latest_grades()`
7	Alertas académicas	Alertas activas ordenadas por severidad	`academic_alerts::get_active_alerts()`

La card de Actividades pendientes usa "lógica relativa invertida": muestra las actividades sin completar (no las completadas), ordenando primero las de entrega más próxima.

Muestra el nombre completo del estudiante y su foto de perfil (avatar). Si el usuario no tiene foto, se usa pix/hero-avatar.png como fallback. Se aplica validación de campos (nombre + imagen) para evitar estados vacíos.

Consolidados en pix/Icon/ (sin prefijo icon-):

Ícono	Archivo
Archivo/actividad	`pix/Icon/archive.svg`
Libro/módulo	`pix/Icon/book.svg`
Calendario	`pix/Icon/calendar-week.svg`
Chevron (acordeón)	`pix/Icon/chevron-down.svg`
Gráfico de líneas	`pix/Icon/line-chart.svg`
Racha	`pix/Icon/meteor.svg`
Calificaciones	`pix/Icon/receipt.svg`
Cerrar modal	`pix/Icon/x.svg`
Copiar (purple)	`pix/Icon/copy-alt-purple.svg`

Los íconos viven en pix/Icon/ (no en la raíz de pix/) para reflejar la estructura de capas de Figma.

Anillo de progreso

pix/progress-ring.svg — SVG animado que muestra el porcentaje de completación general. Se parametriza vía CSS custom properties desde el renderer.

Archivos clave

Archivo	Descripción
`templates/course_progress_modal.mustache`	Template principal (184 líneas)
`classes/output/core_renderer.php`	Método `course_progress_modal_data()`
`scss/preset/cdigital.scss`	517+ líneas de estilos SCSS para la modal
`pix/hero-avatar.png`	Avatar fallback
`pix/progress-ring.svg`	Anillo de progreso SVG
`pix/Icon/*.svg`	9 íconos de la modal
`lang/en/theme_cdigital.php` · `lang/es/theme_cdigital.php`	Strings de la modal y de cada card

Ancho máximo del contenido del curso

Relacionado: el tema amplía el $course-content-maxwidth de Boost de 830 px a 1024 px (Figma 19723-2726) para alinear el contenido del curso con las dimensiones de la modal.

// Override previo al @import de Boost para respetar la variable
$course-content-maxwidth: 1024px;
@import 'preset/boost';

Propósito​

Arquitectura​

Cards de datos​

Cabecera de la modal​

Íconos de la modal​

Anillo de progreso​

Archivos clave​

Ancho máximo del contenido del curso​