Fase 5 completada (21/21 correcciones ejecutadas): P2-001: Documentar Social API (10 controllers, 106 endpoints) P2-002: Documentar componentes Frontend (497 componentes, 103 hooks) P2-003: Actualizar FRONTEND_INVENTORY.yml a v4.0 P2-004: Documentar views Database (17 views en 7 schemas) P2-005: Documentar rutas duplicadas Auth (requiere refactor) P2-006: Documentar código muerto Teacher (requiere refactor) Archivos creados: - docs/90-transversal/api/API-SOCIAL-MODULE.md - docs/frontend/COMPONENTES-INVENTARIO.md - docs/database/VIEWS-INVENTARIO.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
266 lines
7.5 KiB
Markdown
266 lines
7.5 KiB
Markdown
# COMPONENTES FRONTEND - INVENTARIO
|
|
|
|
**Proyecto:** GAMILIT - Plataforma Educativa Gamificada
|
|
**Version:** 1.0
|
|
**Fecha:** 2025-12-26
|
|
**Auditoria:** Inventario real de componentes implementados
|
|
|
|
---
|
|
|
|
## RESUMEN EJECUTIVO
|
|
|
|
| Categoria | Componentes | Descripcion |
|
|
|-----------|-------------|-------------|
|
|
| Shared | 40 | Componentes base reutilizables |
|
|
| Features (main) | 31 | Componentes de funcionalidad core |
|
|
| Gamification | 71 | Sistema de gamificacion completo |
|
|
| Mechanics | 156 | Mecanicas educativas (30 ejercicios) |
|
|
| Apps | 180 | Componentes por portal (Admin, Teacher, Student) |
|
|
| **TOTAL** | **478** | - |
|
|
|
|
---
|
|
|
|
## 1. COMPONENTES COMPARTIDOS (40)
|
|
|
|
**Ubicacion:** `src/shared/components/`
|
|
|
|
### Por Subcategoria
|
|
|
|
| Subcategoria | Cantidad | Ejemplos |
|
|
|--------------|----------|----------|
|
|
| Base | 11 | Toast, StatusBadge, ColorfulCard, RankBadge, LoadingOverlay |
|
|
| Common | 9 | Componentes de uso general |
|
|
| Layout | 3 | Componentes de estructura de pagina |
|
|
| Mechanics | 11 | MediaUploader, RubricEvaluator, ExerciseContentRenderer |
|
|
| Timeline | 2 | Componentes de linea de tiempo |
|
|
| Loading | 2 | Componentes de estado de carga |
|
|
| Celebrations | 1 | Feedback positivo |
|
|
| Media | 1 | Manejo de multimedia |
|
|
|
|
### Componentes Clave
|
|
|
|
| Componente | Proposito |
|
|
|------------|-----------|
|
|
| ProtectedRoute | Rutas protegidas por autenticacion |
|
|
| MediaUploader | Carga de archivos multimedia M4-M5 |
|
|
| RubricEvaluator | Evaluacion con rubricas para docentes |
|
|
| ExerciseContentRenderer | Renderiza contenido de ejercicios |
|
|
| LoadingOverlay | Overlay de carga global |
|
|
|
|
---
|
|
|
|
## 2. COMPONENTES DE FEATURES (31)
|
|
|
|
**Ubicacion:** `src/features/*/components/`
|
|
|
|
### Por Feature
|
|
|
|
| Feature | Componentes | Estado |
|
|
|---------|-------------|--------|
|
|
| Auth | 13 | Completo |
|
|
| Exercises | 11 | Completo |
|
|
| Admin | 2 | Basico |
|
|
| Gamification (main) | 3 | Completo |
|
|
| Notifications | 2 | Completo |
|
|
|
|
---
|
|
|
|
## 3. GAMIFICACION (71)
|
|
|
|
**Ubicacion:** `src/features/gamification/*/components/`
|
|
|
|
### Por Subfeature
|
|
|
|
| Subfeature | Componentes | Descripcion |
|
|
|------------|-------------|-------------|
|
|
| Social | 43 | Amigos, mensajes, activity feed |
|
|
| Economy | 13 | ML Coins, shop, precios |
|
|
| Ranks | 8 | Sistema de rangos Maya |
|
|
| Missions | 7 | Misiones y desafios |
|
|
|
|
### Componentes Destacados
|
|
|
|
| Componente | Subfeature | Proposito |
|
|
|------------|------------|-----------|
|
|
| FriendsList | Social | Lista de amigos con estados |
|
|
| LeaderboardTable | Social | Tabla de clasificacion |
|
|
| ShopItemCard | Economy | Tarjeta de item en tienda |
|
|
| CoinDisplay | Economy | Muestra ML Coins |
|
|
| MayaRankBadge | Ranks | Badge de rango Maya |
|
|
| MissionCard | Missions | Tarjeta de mision |
|
|
|
|
---
|
|
|
|
## 4. MECANICAS EDUCATIVAS (156)
|
|
|
|
**Ubicacion:** `src/features/mechanics/*/`
|
|
|
|
### Por Modulo
|
|
|
|
| Modulo | Componentes | Mecanicas |
|
|
|--------|-------------|-----------|
|
|
| Auxiliar | 16 | 4 (CallToAction, CollagePrensa, ComprencionAuditiva, TextoEnMovimiento) |
|
|
| Module 1 | 38 | 7 (Crucigrama, Emparejamiento, VerdaderoFalso, MapaConceptual, SopaLetras, Timeline, CompletarEspacios) |
|
|
| Module 2 | 27 | 6 (DetectiveTextual, LecturaInferencial, PrediccionNarrativa, ConstruccionHipotesis, RuedaInferencias, PuzzleContexto) |
|
|
| Module 3 | 25 | 5 (DebateDigital, AnalisisFuentes, TribunalOpiniones, MatrizPerspectivas, PodcastArgumentativo) |
|
|
| Module 4 | 32 | 5 (VerificadorFakeNews, AnalisisMemes, NavegacionHipertextual, InfografiaInteractiva, QuizTikTok) |
|
|
| Module 5 | 12 | 3 (ComicDigital, DiarioMultimedia, VideoCarta) |
|
|
| Shared | 6 | APIs, hooks, utils compartidos |
|
|
|
|
### Estructura por Mecanica
|
|
|
|
Cada mecanica tiene:
|
|
- `*Exercise.tsx` - Componente principal
|
|
- `*Types.ts` - Tipos TypeScript
|
|
- `*Schemas.ts` - Schemas Zod
|
|
- `*MockData.ts` - Datos de prueba
|
|
- Componentes auxiliares especificos
|
|
|
|
---
|
|
|
|
## 5. COMPONENTES POR APP (180)
|
|
|
|
### Admin App (85)
|
|
|
|
**Ubicacion:** `src/apps/admin/components/`
|
|
|
|
| Subcategoria | Cantidad | Ejemplos |
|
|
|--------------|----------|----------|
|
|
| Advanced | 9 | TenantManagement, BulkOperations |
|
|
| Alerts | 9 | SystemAlertsTable, AlertDetailsModal |
|
|
| Analytics | 4 | AnalyticsCharts, MetricsCards |
|
|
| Assignments | 4 | AssignmentsTable, AssignmentFilters |
|
|
| Classroom-Teacher | 2 | Asignacion profesor-aula |
|
|
| Content | 5 | ContentTable, ContentEditor |
|
|
| Dashboard | 10 | StatsCards, RecentActivity |
|
|
| Gamification | 7 | RankDistribution, XPGraph |
|
|
| Institutions | 5 | SchoolsTable, ClassroomsPanel |
|
|
| Monitoring | 10 | LogsViewer, SystemMetrics |
|
|
| Progress | 5 | ProgressOverview, ModuleStats |
|
|
| Reports | 4 | ReportGenerator, ExportOptions |
|
|
| Roles | 4 | RolesTable, PermissionsMatrix |
|
|
| Settings | 3 | GeneralSettings, SecuritySettings |
|
|
| Users | 4 | UsersTable, UserDetailsModal |
|
|
|
|
### Teacher App (47)
|
|
|
|
**Ubicacion:** `src/apps/teacher/components/`
|
|
|
|
| Subcategoria | Cantidad | Ejemplos |
|
|
|--------------|----------|----------|
|
|
| Dashboard | 11 | TeacherStats, ClassOverview |
|
|
| Assignments | 6 | AssignmentEditor, DueDate |
|
|
| Analytics | 3 | StudentProgress, ModuleAnalytics |
|
|
| Grading | 2 | GradingPanel, RubricEditor |
|
|
| Monitoring | 5 | AlertsPanel, ActivityFeed |
|
|
| Responses | 3 | ResponsesTable, ResponseDetailModal |
|
|
| Progress | 4 | StudentProgressCard, ModuleProgress |
|
|
| Reports | 2 | ClassReport, StudentReport |
|
|
| Communication | 6 | MessageComposer, AnnouncementForm |
|
|
| Collaboration | 2 | TeamBuilder, GroupAssigner |
|
|
| Alerts | 2 | InterventionAlertsPanel, AlertFilters |
|
|
|
|
### Student App (48)
|
|
|
|
**Ubicacion:** `src/apps/student/components/`
|
|
|
|
| Subcategoria | Cantidad | Ejemplos |
|
|
|--------------|----------|----------|
|
|
| Dashboard | 22 | ProgressWidget, MissionsPreview, RankDisplay |
|
|
| Exercise | 6 | ExerciseCard, ExerciseTimer |
|
|
| Achievements | 7 | AchievementsPreview, BadgeDisplay |
|
|
| Gamification | 7 | CoinBalance, XPProgress |
|
|
| Interactions | 2 | FeedbackModal, HelpRequest |
|
|
| Notifications | 3 | NotificationBell, NotificationList |
|
|
|
|
---
|
|
|
|
## 6. HOOKS (103)
|
|
|
|
### Resumen
|
|
|
|
| Ubicacion | Cantidad |
|
|
|-----------|----------|
|
|
| Shared hooks | 12 |
|
|
| Admin hooks | 23 |
|
|
| Teacher hooks | 21 |
|
|
| Student hooks | 13 |
|
|
| Auth hooks | 6 |
|
|
| Exercises hooks | 4 |
|
|
| Gamification Economy | 5 |
|
|
| Gamification Ranks | 6 |
|
|
| Gamification Social | 7 |
|
|
| Gamification Missions | 1 |
|
|
| Notifications | 2 |
|
|
| Progress | 1 |
|
|
| Root hooks | 2 |
|
|
|
|
### Hooks Compartidos Clave
|
|
|
|
| Hook | Proposito |
|
|
|------|-----------|
|
|
| useAuth | Autenticacion y usuario actual |
|
|
| useInvalidateDashboard | Refrescar datos dashboard |
|
|
| useSanitizedHTML | Sanitizar HTML para XSS |
|
|
| useVideoRecorder | Grabacion de video M5 |
|
|
| useAudioRecorder | Grabacion de audio M5 |
|
|
|
|
---
|
|
|
|
## 7. STORES (Zustand)
|
|
|
|
| Store | Proposito |
|
|
|-------|-----------|
|
|
| authStore | Estado de autenticacion |
|
|
| userStore | Datos del usuario |
|
|
| leaderboardsStore | Datos de clasificacion |
|
|
| missionsStore | Misiones activas |
|
|
| shopStore | Estado de tienda |
|
|
| notificationsStore | Notificaciones |
|
|
| exerciseStore | Estado de ejercicio actual |
|
|
|
|
---
|
|
|
|
## 8. PATRONES ARQUITECTONICOS
|
|
|
|
### Component/Page Pattern
|
|
|
|
Usado en Teacher Portal:
|
|
- `TeacherXXX.tsx` = Componente core con logica
|
|
- `TeacherXXXPage.tsx` = Wrapper con TeacherLayout
|
|
|
|
### Feature-First Organization
|
|
|
|
```
|
|
features/
|
|
gamification/
|
|
social/
|
|
components/
|
|
hooks/
|
|
store/
|
|
types/
|
|
api/
|
|
```
|
|
|
|
### Barrel Exports
|
|
|
|
Cada carpeta tiene `index.ts` para exports centralizados.
|
|
|
|
---
|
|
|
|
## 9. ESTADISTICAS TECNICAS
|
|
|
|
| Metrica | Valor |
|
|
|---------|-------|
|
|
| Componentes totales | 478 |
|
|
| Hooks totales | 103 |
|
|
| Stores (Zustand) | 11 |
|
|
| Mecanicas educativas | 30 |
|
|
| LOC estimadas | ~100,000 |
|
|
|
|
---
|
|
|
|
**Generado por:** Requirements-Analyst
|
|
**Fecha:** 2025-12-26
|
|
**Version:** 1.0
|