# 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