# Matriz de Prioridad - Implementacion Frontend

## Resumen Ejecutivo

Este documento define el orden de prioridad para implementar los componentes frontend de los modulos core del ERP Suite.

| Estado Actual | Valor |
|---------------|-------|
| **Componentes especificados** | 120+ |
| **Componentes implementados** | ~22% |
| **Prioridad** | Fase 1 Foundation |

---

## Criterios de Priorizacion

1. **Dependencia de otros modulos** - Modulos bloqueantes primero
2. **Frecuencia de uso** - Pantallas usadas diariamente
3. **Complejidad** - Menor complejidad primero para momentum
4. **Valor de negocio** - Funcionalidad core antes que nice-to-have

---

## Prioridad 1: Autenticacion (MGN-001)

**Sprint:** 1
**Justificacion:** Sin auth, nada funciona

| Componente | Tipo | Prioridad | Complejidad | Estado |
|------------|------|-----------|-------------|--------|
| LoginPage | Page | P0 | Baja | Pendiente |
| LoginForm | Component | P0 | Baja | Pendiente |
| PasswordInput | Component | P0 | Baja | Pendiente |
| ForgotPasswordPage | Page | P0 | Baja | Pendiente |
| ResetPasswordPage | Page | P0 | Baja | Pendiente |
| authStore | Store | P0 | Media | Pendiente |
| AuthProvider | Context | P0 | Media | Pendiente |
| ProtectedRoute | HOC | P0 | Baja | Pendiente |

**Total:** 8 componentes

---

## Prioridad 2: Layout y Navegacion

**Sprint:** 1
**Justificacion:** Estructura base para toda la app

| Componente | Tipo | Prioridad | Complejidad | Estado |
|------------|------|-----------|-------------|--------|
| AppLayout | Layout | P0 | Media | Pendiente |
| Sidebar | Component | P0 | Media | Pendiente |
| Header | Component | P0 | Baja | Pendiente |
| UserMenu | Component | P0 | Baja | Pendiente |
| Breadcrumbs | Component | P1 | Baja | Pendiente |
| NotificationBell | Component | P2 | Media | Pendiente |

**Total:** 6 componentes

---

## Prioridad 3: Usuarios (MGN-002)

**Sprint:** 2
**Justificacion:** CRUD basico de usuarios

| Componente | Tipo | Prioridad | Complejidad | Estado |
|------------|------|-----------|-------------|--------|
| UsersPage | Page | P0 | Media | Pendiente |
| UserTable | Component | P0 | Media | Pendiente |
| UserForm | Component | P0 | Media | Pendiente |
| UserDetailPage | Page | P0 | Media | Pendiente |
| ProfilePage | Page | P0 | Media | Pendiente |
| ProfileForm | Component | P0 | Baja | Pendiente |
| AvatarUpload | Component | P1 | Media | Pendiente |
| ChangePasswordModal | Component | P0 | Baja | Pendiente |
| PreferencesPage | Page | P1 | Baja | Pendiente |
| PreferencesForm | Component | P1 | Baja | Pendiente |
| ChangeEmailForm | Component | P1 | Media | Pendiente |

**Total:** 11 componentes

---

## Prioridad 4: Roles y Permisos (MGN-003)

**Sprint:** 3
**Justificacion:** RBAC para control de acceso

| Componente | Tipo | Prioridad | Complejidad | Estado |
|------------|------|-----------|-------------|--------|
| RolesPage | Page | P0 | Media | Pendiente |
| RoleTable | Component | P0 | Baja | Pendiente |
| RoleForm | Component | P0 | Media | Pendiente |
| PermissionTree | Component | P0 | Alta | Pendiente |
| RoleDetailPage | Page | P0 | Media | Pendiente |
| AssignPermissionsModal | Component | P0 | Media | Pendiente |
| UserRolesManager | Component | P0 | Media | Pendiente |
| PermissionGuard | HOC | P0 | Media | Pendiente |

**Total:** 8 componentes

---

## Prioridad 5: Tenants (MGN-004)

**Sprint:** 4
**Justificacion:** Multi-tenancy

| Componente | Tipo | Prioridad | Complejidad | Estado |
|------------|------|-----------|-------------|--------|
| TenantsPage | Page | P0 | Media | Pendiente |
| TenantTable | Component | P0 | Baja | Pendiente |
| TenantForm | Component | P0 | Media | Pendiente |
| TenantDetailPage | Page | P0 | Media | Pendiente |
| TenantSelector | Component | P0 | Media | Pendiente |
| TenantUsersManager | Component | P0 | Media | Pendiente |
| SubscriptionCard | Component | P1 | Media | Pendiente |
| TenantContext | Context | P0 | Media | Pendiente |

**Total:** 8 componentes

---

## Componentes Compartidos (Prioritarios)

Componentes reutilizables que deben crearse primero:

| Componente | Tipo | Usado Por | Prioridad |
|------------|------|-----------|-----------|
| DataTable | Component | Todas las listas | P0 |
| Modal | Component | Todos los forms | P0 |
| Form | Component | Todos los forms | P0 |
| Button | Component | Toda la app | P0 |
| Input | Component | Todos los forms | P0 |
| Select | Component | Todos los forms | P0 |
| Checkbox | Component | Listas, forms | P0 |
| Toast/Notification | Component | Feedback | P0 |
| ConfirmDialog | Component | Acciones destructivas | P0 |
| LoadingSpinner | Component | Async operations | P0 |
| EmptyState | Component | Listas vacias | P1 |
| ErrorBoundary | HOC | Manejo de errores | P0 |
| Pagination | Component | Listas | P0 |
| SearchInput | Component | Busquedas | P0 |
| FilterPanel | Component | Filtros avanzados | P1 |

**Total:** 15 componentes base

---

## Plan de Implementacion por Sprint

### Sprint 1 (Auth + Layout)
```
Semana 1:
- [ ] Componentes base (Button, Input, Modal, Form)
- [ ] LoginPage + LoginForm
- [ ] authStore + AuthProvider

Semana 2:
- [ ] AppLayout + Sidebar + Header
- [ ] ProtectedRoute
- [ ] ForgotPasswordPage + ResetPasswordPage
```

### Sprint 2 (Users)
```
Semana 1:
- [ ] DataTable + Pagination
- [ ] UsersPage + UserTable
- [ ] UserForm modal

Semana 2:
- [ ] ProfilePage + ProfileForm
- [ ] AvatarUpload
- [ ] ChangePasswordModal
```

### Sprint 3 (Roles)
```
Semana 1:
- [ ] RolesPage + RoleTable
- [ ] RoleForm
- [ ] PermissionTree (complejo)

Semana 2:
- [ ] AssignPermissionsModal
- [ ] UserRolesManager
- [ ] PermissionGuard
```

### Sprint 4 (Tenants)
```
Semana 1:
- [ ] TenantsPage + TenantTable
- [ ] TenantForm
- [ ] TenantContext

Semana 2:
- [ ] TenantSelector
- [ ] TenantUsersManager
- [ ] SubscriptionCard
```

### Sprint 5 (Extras)
```
Semana 1:
- [ ] PreferencesPage + PreferencesForm
- [ ] ChangeEmailForm
- [ ] UserDetailPage completo

Semana 2:
- [ ] Tests de componentes
- [ ] Storybook stories
- [ ] Pulido de UX
```

---

## Tecnologias y Convenciones

### Stack Frontend
- **Framework:** React 18+
- **Router:** React Router v6
- **State:** Zustand
- **Forms:** React Hook Form + Zod
- **UI Library:** shadcn/ui (basado en Radix)
- **Styling:** Tailwind CSS
- **API Client:** TanStack Query
- **Tests:** Vitest + Testing Library

### Estructura de Carpetas
```
src/
├── components/           # Componentes compartidos
│   ├── ui/              # Componentes base (shadcn)
│   └── shared/          # Componentes de negocio compartidos
├── features/            # Modulos por funcionalidad
│   ├── auth/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── stores/
│   │   └── api/
│   ├── users/
│   ├── roles/
│   └── tenants/
├── layouts/             # Layouts de pagina
├── hooks/               # Hooks globales
├── lib/                 # Utilidades
├── stores/              # Stores globales
└── types/               # Tipos TypeScript
```

### Convenciones de Nombrado
- **Componentes:** PascalCase (UserTable.tsx)
- **Hooks:** camelCase con use (useAuth.ts)
- **Stores:** camelCase con Store (authStore.ts)
- **Types:** PascalCase (User.ts)
- **Utils:** camelCase (formatDate.ts)

---

## Metricas de Progreso

| Metrica | Target |
|---------|--------|
| Componentes base | 15 |
| Paginas core | 12 |
| Cobertura tests | 70% |
| Storybook stories | 80% componentes |
| Lighthouse Performance | > 90 |
| Lighthouse Accessibility | > 90 |

---

## Historial

| Version | Fecha | Autor | Cambios |
|---------|-------|-------|---------|
| 1.0 | 2025-12-06 | System | Creacion inicial |