PLAN DE DESARROLLO FRONTEND
Proyecto: ERP Generic
Fecha: 2025-11-24
Version: 1.0.0
Autor: Architecture-Analyst
Resumen Ejecutivo
Este documento detalla el plan para desarrollar el frontend del ERP Generic con soporte para Web y Mobile.
Stack Tecnologico
| Plataforma |
Tecnologia |
| Web |
React 18 + Vite 5 + TypeScript 5 |
| Mobile |
React Native (Expo) |
| Styling |
Tailwind CSS (web) / NativeWind (mobile) |
| State |
Zustand |
| Forms |
React Hook Form + Zod |
| HTTP |
Axios |
| Router |
React Router v6 (web) / React Navigation (mobile) |
Estructura Monorepo
apps/
├── frontend-web/ # React + Vite (Web)
│ ├── src/
│ │ ├── app/ # Providers, layouts, router
│ │ ├── pages/ # Paginas por modulo
│ │ ├── features/ # Features por rol
│ │ ├── shared/ # Componentes compartidos
│ │ └── services/ # API clients
│ └── package.json
│
├── frontend-mobile/ # React Native (Fase 2)
│ └── ...
│
└── backend/ # Ya implementado (309 endpoints)
FASE 1: Setup y Fundamentos (Web)
1.1 Proyecto Base
Crear proyecto Vite:
- React 18 + TypeScript
- ESLint + Prettier
- Path aliases
- Tailwind CSS 3+
Archivos:
vite.config.tstsconfig.jsontailwind.config.js.eslintrc.js
1.2 Estructura FSD (Feature-Sliced Design)
src/
├── app/
│ ├── providers/
│ │ ├── AuthProvider.tsx
│ │ ├── QueryProvider.tsx
│ │ └── index.tsx
│ ├── layouts/
│ │ ├── DashboardLayout.tsx
│ │ ├── AuthLayout.tsx
│ │ └── index.tsx
│ └── router/
│ ├── routes.tsx
│ ├── ProtectedRoute.tsx
│ └── index.tsx
│
├── shared/
│ ├── components/
│ │ ├── atoms/ # Button, Input, Badge, etc.
│ │ ├── molecules/ # FormField, SearchBar, etc.
│ │ ├── organisms/ # DataTable, Modal, Sidebar
│ │ └── templates/ # PageHeader, EmptyState
│ ├── hooks/
│ │ ├── useQuery.ts
│ │ ├── useMutation.ts
│ │ ├── useDebounce.ts
│ │ └── useLocalStorage.ts
│ ├── stores/
│ │ ├── useAuthStore.ts
│ │ ├── useCompanyStore.ts
│ │ ├── useUIStore.ts
│ │ └── useNotificationStore.ts
│ ├── utils/
│ │ ├── formatters.ts
│ │ ├── validators.ts
│ │ └── cn.ts (classnames)
│ ├── types/
│ │ ├── api.types.ts
│ │ ├── entities.types.ts
│ │ └── index.ts
│ └── constants/
│ ├── api-endpoints.ts
│ ├── roles.ts
│ └── status.ts
│
├── services/
│ ├── api/
│ │ ├── axios-instance.ts
│ │ ├── auth.api.ts
│ │ ├── users.api.ts
│ │ ├── companies.api.ts
│ │ └── ...
│ └── index.ts
│
├── features/
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── index.ts
│ └── dashboard/
│ ├── components/
│ └── index.ts
│
├── pages/
│ ├── auth/
│ │ ├── LoginPage.tsx
│ │ ├── RegisterPage.tsx
│ │ └── ResetPasswordPage.tsx
│ ├── dashboard/
│ │ └── DashboardPage.tsx
│ └── ...
│
└── main.tsx
FASE 2: Componentes Base
2.1 Atoms (Componentes Basicos)
| Componente |
Descripcion |
Prioridad |
| Button |
Botones con variantes |
P0 |
| Input |
Campos de texto |
P0 |
| Select |
Dropdown/select |
P0 |
| Checkbox |
Checkbox con label |
P0 |
| Badge |
Etiquetas de estado |
P0 |
| Avatar |
Imagen de usuario |
P1 |
| Spinner |
Indicador de carga |
P0 |
| Icon |
Wrapper de iconos |
P0 |
2.2 Molecules (Composiciones)
| Componente |
Descripcion |
Prioridad |
| FormField |
Label + Input + Error |
P0 |
| SearchBar |
Input + Icon + Button |
P0 |
| Card |
Container con header/body |
P0 |
| Alert |
Mensaje de alerta |
P0 |
| Breadcrumb |
Navegacion |
P1 |
| DatePicker |
Selector de fecha |
P1 |
2.3 Organisms (Componentes Complejos)
| Componente |
Descripcion |
Prioridad |
| Navbar |
Barra de navegacion |
P0 |
| Sidebar |
Menu lateral |
P0 |
| DataTable |
Tabla con paginacion |
P0 |
| Modal |
Ventana modal |
P0 |
| Dropdown |
Menu desplegable |
P0 |
| Pagination |
Paginacion |
P0 |
| Tabs |
Pestanas |
P1 |
2.4 Templates (Layouts)
| Componente |
Descripcion |
Prioridad |
| DashboardLayout |
Layout principal |
P0 |
| AuthLayout |
Layout autenticacion |
P0 |
| PageHeader |
Cabecera de pagina |
P0 |
| EmptyState |
Estado vacio |
P1 |
FASE 3: Modulos por Prioridad
Sprint 1: Autenticacion y Dashboard
| Modulo |
Endpoints Backend |
Pantallas |
| Auth |
login, register, logout |
Login, Register, Reset |
| Dashboard |
- |
Dashboard principal |
| Users |
CRUD usuarios |
Lista, Detalle, Form |
Sprint 2: Core y Partners
| Modulo |
Endpoints Backend |
Pantallas |
| Companies |
CRUD empresas |
Lista, Detalle, Config |
| Partners |
CRUD partners |
Lista, Detalle, Form |
| Core |
Countries, Currencies, UoM |
Configuracion |
Sprint 3: Inventory y Products
| Modulo |
Endpoints Backend |
Pantallas |
| Products |
CRUD productos |
Lista, Detalle, Form |
| Categories |
CRUD categorias |
Lista, Form |
| Warehouses |
CRUD almacenes |
Lista, Detalle |
| Stock |
Movimientos, Ajustes |
Vistas, Forms |
Sprint 4: Sales y Purchases
| Modulo |
Endpoints Backend |
Pantallas |
| Quotations |
CRUD + workflow |
Lista, Detalle, Form |
| Sales Orders |
CRUD + workflow |
Lista, Detalle |
| RFQs |
CRUD + workflow |
Lista, Detalle |
| Purchase Orders |
CRUD + workflow |
Lista, Detalle |
Sprint 5: Financial
| Modulo |
Endpoints Backend |
Pantallas |
| Accounts |
CRUD cuentas |
Lista, Form |
| Journals |
CRUD journals |
Lista, Form |
| Invoices |
CRUD + workflow |
Lista, Detalle, Form |
| Payments |
CRUD + reconcile |
Lista, Form |
Sprint 6: Projects y HR
| Modulo |
Endpoints Backend |
Pantallas |
| Projects |
CRUD proyectos |
Lista, Detalle, Kanban |
| Tasks |
CRUD tareas |
Lista, Kanban |
| Timesheets |
CRUD timesheets |
Lista, Form |
| Employees |
CRUD empleados |
Lista, Detalle |
| Contracts |
CRUD contratos |
Lista, Form |
| Leaves |
CRUD ausencias |
Lista, Form, Calendario |
Sprint 7: CRM y System
| Modulo |
Endpoints Backend |
Pantallas |
| Leads |
CRUD + convert |
Lista, Pipeline, Form |
| Opportunities |
CRUD + won/lost |
Lista, Pipeline |
| Messages |
Chatter |
Componente embebido |
| Notifications |
CRUD |
Dropdown, Lista |
| Activities |
CRUD |
Lista, Calendario |
FASE 4: Mobile (React Native)
4.1 Preparacion
- Configurar Expo
- NativeWind para estilos
- React Navigation
- Reuso de stores Zustand
- Reuso de API clients
4.2 Pantallas Prioritarias Mobile
| Pantalla |
Descripcion |
| Login |
Autenticacion |
| Dashboard |
Resumen KPIs |
| Tasks |
Lista y detalle de tareas |
| Timesheets |
Registro de tiempo |
| Notifications |
Push notifications |
| Profile |
Perfil de usuario |
Metricas de Exito
| Metrica |
Objetivo |
| Cobertura de tests |
70%+ |
| Lighthouse Performance |
90+ |
| Lighthouse Accessibility |
95+ |
| Bundle size |
< 500KB gzipped |
| First Contentful Paint |
< 1.5s |
Siguiente Accion
Iniciar con FASE 1.1: Proyecto Base configurando:
- Vite + React + TypeScript
- Tailwind CSS
- Path aliases
- ESLint + Prettier
Documento generado por: Architecture-Analyst
Fecha: 2025-11-24
