282 lines
7.6 KiB
Markdown
282 lines
7.6 KiB
Markdown
# 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 |
|