erp-core/docs/FRONTEND-PRIORITY-MATRIX.md

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