306 lines
8.3 KiB
Markdown
306 lines
8.3 KiB
Markdown
# 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.ts`
|
|
- `tsconfig.json`
|
|
- `tailwind.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:
|
|
1. Vite + React + TypeScript
|
|
2. Tailwind CSS
|
|
3. Path aliases
|
|
4. ESLint + Prettier
|
|
|
|
---
|
|
|
|
**Documento generado por:** Architecture-Analyst
|
|
**Fecha:** 2025-11-24
|