Historial Progreso - Copy this React, Tailwind Component to your project

Genera esta interfaz con palabras en español ### **Ruta:** `/history` ### **Propósito:** Mostrar al alumno un registro detallado de su progreso en la plataforma. ### **Elementos:** 1. **Encabezado:** Título: "Historial de Progreso." 2. **Gráficos y Tablas:** **Gráfico de Progreso General:** Barras que muestren el porcentaje de módulos completados por categoría. **Tabla de Módulos:** Columnas: Título del Módulo. Fecha de Inicio. Fecha de Finalización. Calificación obtenida (si aplica). Filtro por rango de fechas. 3. **Indicadores de Rendimiento:** Resumen de actividades completadas, tiempo dedicado y cuestionarios aprobados. sigue esta paleta de colores ### **Colores Primarios (Uso Principal)** **Azul Claro (#4A90E2):** Representa confianza, estabilidad y calma. Ideal para encabezados, botones principales y elementos destacados. **Blanco (#FFFFFF):** Fondo principal para mantener un diseño limpio y espacioso. ### **Colores Secundarios (Soporte y Contraste)** **Gris Claro (#F5F5F5):** Para fondos secundarios (paneles, tarjetas) y separación visual. **Gris Medio (#9E9E9E):** Para textos secundarios o explicaciones. ### **Colores de Resaltado (Llamar la Atención)** **Verde (#4CAF50):** Indicadores de progreso o estados positivos (completado, éxito). **Amarillo (#FFC107):** Para advertencias o información importante. **Rojo (#F44336):** Para errores o estados críticos. ### **Colores para Acciones e Interactividad** **Naranja (#FF9800):** Botones de llamada a la acción secundaria o elementos interactivos destacados. **Cian (#00BCD4):** Para enlaces o detalles interactivos relacionados con actividades. ### **Colores para Dimensiones del Aprendizaje (Codificación Visual)** Cada dimensión puede tener un color asociado para facilitar la identificación rápida: **Procesamiento:** Azul (#4A90E2). **Percepción:** Verde (#4CAF50). **Entrada de Información:** Amarillo (#FFC107). **Comprensión:** Naranja (#FF9800). **Interacción Social:** Cian (#00BCD4). ### **Ejemplo de Aplicación en la Plataforma** **Fondo Principal:** Blanco (#FFFFFF) para no saturar al usuario. **Paneles o Tarjetas:** Gris Claro (#F5F5F5) con bordes sutiles. **Texto Principal:** Gris Oscuro (#333333) para buen contraste. **Botones Principales:** Azul Claro (#4A90E2) con texto blanco. **Indicadores de Estado:** Verde para progreso (barra de avance). Rojo para errores (mensaje de validación). Amarillo para advertencias (actividades pendientes). **Módulos de Aprendizaje:** Los colores de las dimensiones pueden usarse como etiquetas o barras laterales en los objetos de aprendizaje.