# ADR-009: Frontend Architecture - Feature-Sliced Design

**Estado:** Aceptada
**Fecha:** 2025-11-24
**Responsable:** Architecture-Analyst
**Proyecto:** ERP Construccion

## Contexto

Frontend debe soportar:
- Multiples roles (director, residente, almacenista)
- Dashboards especificos por rol
- Portal de derechohabientes
- App movil (React Native)

## Decision

**Feature-Sliced Design (FSD):**

```
frontend/src/
+-- shared/             # Componentes reutilizables
|   +-- ui/             # Botones, inputs, modals
|   +-- api/            # Clientes API
|   +-- utils/          # Helpers
+-- features/           # Por rol/funcionalidad
|   +-- director/       # Dashboard director
|   +-- residente/      # Vistas residente obra
|   +-- almacenista/    # Gestion inventarios
|   +-- portal/         # Portal derechohabientes
+-- pages/              # Paginas de la app
+-- app/                # Configuracion global
```

## Justificacion

### Referencia a Gamilit
- 180+ componentes reutilizables
- Arquitectura escalable probada

### Especifico para Construccion
- Features separados por rol de construccion
- Portal derechohabientes como feature aislado
- Componentes especificos: KardexTable, EstimateForm, AvanceGantt

## Consecuencias

### Positivas
- Desarrollo 40% mas rapido
- Reutilizacion maxima de componentes
- Separacion clara por rol
- Mantenibilidad +50%

### Negativas
- Curva de aprendizaje FSD
- Mitigacion: Documentacion y ejemplos

## Implementacion

### Acciones Requeridas
- [ ] Migrar a estructura FSD
- [ ] Crear componentes shared/ui base
- [ ] Implementar features por rol
- [ ] Separar portal como feature

### Criterios de Aceptacion
- Componentes compartidos funcionan en todas las features
- Cada rol tiene su dashboard
- Portal funciona como SPA independiente

## Referencias
- [ERP Generico ADR-009](../../erp-generic/docs/adr/ADR-009-frontend-architecture.md)
- [Gamilit Frontend Patterns](../../shared/reference/gamilit/frontend-patterns.md)