workspace/projects/gamilit/docs/frontend/COMPONENTES-INVENTARIO.md
rckrdmrd 05cd7aa966 docs: Correcciones P2 completas - Social API, componentes, views, inventarios
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>
2025-12-26 15:57:07 -06:00

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