michangarrito/orchestration/_archive/analisis/PLAN-MAESTRO-FRONTEND-2026-01-20.md
Adrian Flores Cortes 2fb9f3f6b5
Some checks are pending
CI/CD Pipeline / Backend CI (push) Waiting to run
CI/CD Pipeline / Frontend CI (push) Waiting to run
CI/CD Pipeline / WhatsApp Service CI (push) Waiting to run
CI/CD Pipeline / Mobile CI (push) Waiting to run
CI/CD Pipeline / Docker Build (./apps/backend, ./apps/backend/Dockerfile, backend) (push) Blocked by required conditions
CI/CD Pipeline / Docker Build (./apps/frontend, ./apps/frontend/Dockerfile, frontend) (push) Blocked by required conditions
CI/CD Pipeline / Docker Build (./apps/whatsapp-service, ./apps/whatsapp-service/Dockerfile, whatsapp-service) (push) Blocked by required conditions
CI/CD Pipeline / Deploy to Production (push) Blocked by required conditions
[ESTANDAR-ORCHESTRATION] refactor: Consolidate to standard structure
- Move 7 non-standard folders to _archive/
- Archive 3 extra root files
- Update _MAP.md with standardized structure

Standard: SIMCO-ESTANDAR-ORCHESTRATION v1.0.0
Level: CONSUMER (L2)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-24 14:38:04 -06:00

481 lines
16 KiB
Markdown

# PLAN MAESTRO: Analisis y Documentacion Frontend
# MiChangarrito - 2026-01-20
**Tipo:** Analisis y Planeacion CAPVED
**Fase:** Documentacion y Gobernanza
**Version:** 1.0.0
**Autor:** Agente Arquitecto de Soluciones
**Estado:** EN REVISION
---
## RESUMEN EJECUTIVO
### Objetivo
Realizar un analisis detallado de la documentacion y definiciones del frontend (web y mobile), identificar gaps, ejecutar purga documental, e integrar definiciones faltantes de manera ordenada.
### Alcance
- Frontend Web (React + Vite)
- Frontend Mobile (React Native + Expo)
- Documentacion en docs/ y orchestration/
- APIs consumidas por frontend
- Coherencia documentacion vs codigo
### Hallazgos Criticos
| Tipo | Cantidad | Impacto |
|------|----------|---------|
| Paginas con Mock Data | 8 de 14 | ALTO |
| Discrepancias Documentales | 4 | ALTO |
| Funcionalidades No Implementadas | 4 | MEDIO |
| Documentacion Desactualizada | 5+ archivos | MEDIO |
---
## PARTE 1: PLAN DE PURGA DOCUMENTAL
### 1.1 Documentos con Informacion Contradictoria
| Archivo | Problema | Accion Requerida |
|---------|----------|------------------|
| `docs/_definitions/ESTADO-REAL-EPICAS.md` | MCH-022 marcado PENDIENTE cuando esta COMPLETADO | ACTUALIZAR con estado real |
| `docs/_definitions/ESTADO-REAL-EPICAS.md` | MCH-006, MCH-007 marcados PENDIENTE | VALIDAR y ACTUALIZAR |
| `docs/_definitions/ESTADO-REAL-EPICAS.md` | Progreso 60% vs PROXIMA-ACCION 100% | RECONCILIAR |
| `orchestration/PROXIMA-ACCION.md` | Frontend 100% pero 8 paginas con mock | CORREGIR metrica |
| `orchestration/inventarios/FRONTEND_INVENTORY.yml` | Notas contradicen estado real | ACTUALIZAR notas |
### 1.2 Documentos a Eliminar o Archivar
| Archivo | Razon | Accion |
|---------|-------|--------|
| `backups/docs-backup-2026-01-10/` | Backup antiguo, ya no necesario | ARCHIVAR o ELIMINAR |
| `backups/orchestration-backup-2026-01-10/` | Backup antiguo | ARCHIVAR o ELIMINAR |
| Trazas anteriores a Sprint 5 | Informacion obsoleta | ARCHIVAR |
### 1.3 Discrepancias de Conteo a Resolver
| Elemento | MASTER_INVENTORY | DATABASE_INVENTORY | PROXIMA-ACCION | Accion |
|----------|------------------|-------------------|----------------|--------|
| Tablas BD | 38 | 49 | 51 | VALIDAR y UNIFICAR |
| Modulos Backend | - | - | 21 | VALIDAR |
| Paginas Frontend | 12 | - | 14 | VALIDAR |
---
## PARTE 2: GAPS DE DOCUMENTACION FRONTEND
### 2.1 Documentacion Faltante - Componentes
**Estado Actual:** Solo Layout.tsx documentado
**Requerido:** Fichas para 50+ componentes
| Categoria | Componentes Existentes | Documentados | Gap |
|-----------|----------------------|--------------|-----|
| Layout | Layout.tsx | 1 | 0 |
| Payments | ClabeDisplay.tsx, CodiQR.tsx | 0 | 2 |
| Common | Buttons, Inputs, Modals, etc. | 0 | ~15 |
| Dashboard | Widgets, Charts, Stats | 0 | ~10 |
| Products | ProductCard, ProductForm | 0 | ~5 |
| Sales | POS, Cart, PaymentModal | 0 | ~8 |
| Forms | Todos los formularios | 0 | ~10 |
### 2.2 Documentacion Faltante - Contexts
| Context | Existe en Codigo | Documentado | Gap |
|---------|-----------------|-------------|-----|
| AuthContext | SI | SI | - |
| CartContext | NO VERIFICADO | NO | INVESTIGAR |
| TenantContext | NO VERIFICADO | NO | INVESTIGAR |
### 2.3 Documentacion Faltante - Servicios API
**Estado Actual:** 13 modulos en api.ts con 84 endpoints
**Documentado en QUICK-API.yml:** Parcial
| Modulo API | Endpoints | Documentado |
|------------|-----------|-------------|
| authApi | 4 | SI |
| productsApi | 5 | PARCIAL |
| ordersApi | 4 | PARCIAL |
| customersApi | 5 | PARCIAL |
| inventoryApi | 4 | PARCIAL |
| dashboardApi | 3 | NO |
| referralsApi | 8 | PARCIAL |
| codiSpeiApi | 8 | PARCIAL |
| invoicesApi | 9 | PARCIAL |
| marketplaceApi | 11 | PARCIAL |
| billingApi | 10 | PARCIAL |
| subscriptionsApi | 5 | PARCIAL |
### 2.4 Paginas Sin Conexion a Backend
| Pagina | Endpoints Requeridos | Implementados Backend | Gap |
|--------|---------------------|----------------------|-----|
| Dashboard | 3 (stats, chart, top) | SI | Conectar frontend |
| Products | 5 (CRUD + barcode) | SI | Conectar frontend |
| Orders | 4 (CRUD + status) | SI | Conectar frontend |
| Customers | 5 (CRUD + stats) | SI | Conectar frontend |
| Fiado | 5 (fiados CRUD) | SI | Conectar frontend |
| Inventory | 4 (movements, alerts) | SI | Conectar frontend |
| Settings | ~10 (preferences) | PARCIAL | Implementar backend |
---
## PARTE 3: PLAN ESTRUCTURADO CAPVED
### NIVEL 0: Proyecto Principal
```
MCH-FRONTEND-DOC-2026
├── T1: Purga y Limpieza Documental
├── T2: Sincronizacion Documentacion-Codigo
├── T3: Integracion Frontend Web con APIs
├── T4: Documentacion de Componentes
├── T5: Implementacion de Funcionalidades Faltantes
└── T6: Validacion Final y Cierre
```
---
### NIVEL 1: Tareas Principales
#### T1: PURGA Y LIMPIEZA DOCUMENTAL
**Prioridad:** P0 (Prerequisito)
**Dependencias:** Ninguna
**Estado:** LISTO PARA EJECUTAR
##### Subtareas T1:
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T1.1 | Actualizar ESTADO-REAL-EPICAS.md con estados correctos | C-A-P-V-E-D | 1h |
| T1.2 | Reconciliar PROXIMA-ACCION.md con estado real frontend | C-A-P-V-E-D | 1h |
| T1.3 | Unificar conteos en inventarios (tablas, modulos, paginas) | C-A-P-V-E-D | 2h |
| T1.4 | Archivar backups obsoletos a carpeta .archive/ | C-A-E-D | 30m |
| T1.5 | Actualizar notas en FRONTEND_INVENTORY.yml | C-A-E-D | 30m |
**Criterio de Aceptacion:**
- Todos los documentos reflejan el estado real del codigo
- No hay contradicciones entre documentos
- Conteos unificados y verificados
---
#### T2: SINCRONIZACION DOCUMENTACION-CODIGO
**Prioridad:** P0
**Dependencias:** T1
**Estado:** BLOQUEADO por T1
##### Subtareas T2:
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T2.1 | Verificar estado real de MCH-006 (Onboarding) en codigo | C-A-V-D | 1h |
| T2.2 | Verificar estado real de MCH-007 (Templates) en codigo | C-A-V-D | 1h |
| T2.3 | Verificar estado real de MCH-022 (Offline) en codigo | C-A-V-D | 1h |
| T2.4 | Verificar estado real de MCH-026 (i18n) en codigo | C-A-V-D | 1h |
| T2.5 | Actualizar epicas con estado verificado | C-A-E-D | 2h |
| T2.6 | Actualizar ROADMAP-CORREGIDO.md | C-A-E-D | 1h |
**Criterio de Aceptacion:**
- Cada epica tiene estado verificado contra codigo
- Documentacion de epicas actualizada
- Roadmap refleja realidad
---
#### T3: INTEGRACION FRONTEND WEB CON APIs
**Prioridad:** P1
**Dependencias:** T2
**Estado:** BLOQUEADO por T2
##### Subtareas T3 - Por Pagina:
###### T3.1 Dashboard.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.1.1 | Contexto: Revisar endpoints disponibles (dashboardApi) | C | 15m |
| T3.1.2 | Analisis: Mapear datos mock a endpoints reales | A | 30m |
| T3.1.3 | Planeacion: Definir estrategia de integracion | P | 15m |
| T3.1.4 | Validacion: Verificar estructura de respuesta API | V | 15m |
| T3.1.5 | Ejecucion: Reemplazar mock con llamadas API | E | 2h |
| T3.1.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.2 Products.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.2.1 | Contexto: Revisar productsApi disponible | C | 15m |
| T3.2.2 | Analisis: Mapear CRUD mock a endpoints | A | 30m |
| T3.2.3 | Planeacion: Definir hooks y queries | P | 15m |
| T3.2.4 | Validacion: Test endpoints con Postman/curl | V | 15m |
| T3.2.5 | Ejecucion: Implementar integracion | E | 3h |
| T3.2.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.3 Orders.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.3.1 | Contexto: Revisar ordersApi | C | 15m |
| T3.3.2 | Analisis: Mapear estados y flujos | A | 30m |
| T3.3.3 | Planeacion: Definir mutaciones | P | 15m |
| T3.3.4 | Validacion: Test de cambio de estado | V | 15m |
| T3.3.5 | Ejecucion: Implementar integracion | E | 3h |
| T3.3.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.4 Customers.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.4.1 | Contexto: Revisar customersApi | C | 15m |
| T3.4.2 | Analisis: Mapear CRUD + stats | A | 30m |
| T3.4.3 | Planeacion: Definir queries y mutations | P | 15m |
| T3.4.4 | Validacion: Test endpoints | V | 15m |
| T3.4.5 | Ejecucion: Implementar integracion | E | 3h |
| T3.4.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.5 Fiado.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.5.1 | Contexto: Revisar endpoints fiados | C | 15m |
| T3.5.2 | Analisis: Mapear operaciones | A | 30m |
| T3.5.3 | Planeacion: Definir flujos de pago | P | 15m |
| T3.5.4 | Validacion: Test operaciones | V | 15m |
| T3.5.5 | Ejecucion: Implementar integracion | E | 3h |
| T3.5.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.6 Inventory.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.6.1 | Contexto: Revisar inventoryApi | C | 15m |
| T3.6.2 | Analisis: Mapear movimientos y alertas | A | 30m |
| T3.6.3 | Planeacion: Definir ajustes de stock | P | 15m |
| T3.6.4 | Validacion: Test operaciones | V | 15m |
| T3.6.5 | Ejecucion: Implementar integracion | E | 3h |
| T3.6.6 | Documentacion: Actualizar inventario | D | 15m |
###### T3.7 Settings.tsx
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T3.7.1 | Contexto: Identificar endpoints necesarios | C | 30m |
| T3.7.2 | Analisis: Gap de endpoints backend | A | 1h |
| T3.7.3 | Planeacion: Definir endpoints faltantes | P | 30m |
| T3.7.4 | Validacion: Revisar con arquitectura | V | 15m |
| T3.7.5 | Ejecucion: Implementar backend + frontend | E | 4h |
| T3.7.6 | Documentacion: Actualizar inventarios | D | 30m |
---
#### T4: DOCUMENTACION DE COMPONENTES
**Prioridad:** P2
**Dependencias:** T3 (parcial)
**Estado:** BLOQUEADO por T3
##### Subtareas T4:
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T4.1 | Crear template de ficha de componente | C-A-P-E-D | 1h |
| T4.2 | Documentar componentes payments/ (2) | C-A-E-D | 1h |
| T4.3 | Documentar componentes common/ (~15) | C-A-E-D | 4h |
| T4.4 | Documentar componentes de paginas (~20) | C-A-E-D | 6h |
| T4.5 | Crear indice de componentes | C-A-E-D | 1h |
| T4.6 | Actualizar FRONTEND_INVENTORY.yml | C-A-E-D | 30m |
---
#### T5: FUNCIONALIDADES FALTANTES
**Prioridad:** P3
**Dependencias:** T3
**Estado:** BLOQUEADO por T3
##### T5.1 Exportacion de Datos (PDF/Excel)
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T5.1.1 | Contexto: Identificar reportes a exportar | C | 30m |
| T5.1.2 | Analisis: Evaluar librerias (jsPDF, xlsx) | A | 1h |
| T5.1.3 | Planeacion: Disenar endpoints y formatos | P | 1h |
| T5.1.4 | Validacion: Prototipar un reporte | V | 2h |
| T5.1.5 | Ejecucion: Implementar en backend y frontend | E | 8h |
| T5.1.6 | Documentacion: Actualizar API docs | D | 1h |
##### T5.2 Dark Mode
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T5.2.1 | Contexto: Revisar estructura CSS actual | C | 30m |
| T5.2.2 | Analisis: Evaluar estrategia Tailwind dark | A | 30m |
| T5.2.3 | Planeacion: Definir paleta oscura | P | 1h |
| T5.2.4 | Validacion: Prototipo en una pagina | V | 1h |
| T5.2.5 | Ejecucion: Implementar en todas las paginas | E | 4h |
| T5.2.6 | Documentacion: Guia de temas | D | 30m |
##### T5.3 PWA (Progressive Web App)
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T5.3.1 | Contexto: Revisar requisitos PWA | C | 30m |
| T5.3.2 | Analisis: Evaluar Vite PWA plugin | A | 1h |
| T5.3.3 | Planeacion: Definir manifest y SW | P | 1h |
| T5.3.4 | Validacion: Test en Lighthouse | V | 1h |
| T5.3.5 | Ejecucion: Implementar PWA | E | 4h |
| T5.3.6 | Documentacion: Guia de instalacion | D | 30m |
---
#### T6: VALIDACION FINAL Y CIERRE
**Prioridad:** P0
**Dependencias:** T1, T2, T3, T4, T5
**Estado:** BLOQUEADO
##### Subtareas T6:
| ID | Tarea | CAPVED | Esfuerzo |
|----|-------|--------|----------|
| T6.1 | Ejecutar build completo (npm run build) | V | 15m |
| T6.2 | Ejecutar lint (npm run lint) | V | 15m |
| T6.3 | Ejecutar tests E2E (si existen) | V | 30m |
| T6.4 | Verificar coherencia inventarios | V | 1h |
| T6.5 | Actualizar PROXIMA-ACCION.md | D | 30m |
| T6.6 | Crear traza de cierre | D | 30m |
---
## PARTE 4: ORDEN DE EJECUCION
### Fase A: Fundamentos (Prerequisitos)
```
T1 (Purga) ────► T2 (Sincronizacion)
```
**Duracion estimada:** 1-2 dias
**Puede ejecutarse en paralelo:** NO
### Fase B: Integracion (Core)
```
T2 ────► T3.1 (Dashboard)
├──► T3.2 (Products) ← Paralelo
├──► T3.3 (Orders) ← Paralelo
├──► T3.4 (Customers) ← Paralelo
├──► T3.5 (Fiado) ← Paralelo
├──► T3.6 (Inventory) ← Paralelo
└──► T3.7 (Settings) ← Secuencial (requiere backend)
```
**Duracion estimada:** 3-4 dias
**Puede ejecutarse en paralelo:** SI (T3.1-T3.6)
### Fase C: Documentacion
```
T3 ────► T4 (Componentes)
```
**Duracion estimada:** 2 dias
**Puede ejecutarse en paralelo:** PARCIAL (con T5)
### Fase D: Mejoras
```
T3 ────► T5.1 (PDF/Excel)
├──► T5.2 (Dark Mode) ← Paralelo
└──► T5.3 (PWA) ← Paralelo
```
**Duracion estimada:** 2-3 dias
**Puede ejecutarse en paralelo:** SI
### Fase E: Cierre
```
T4 + T5 ────► T6 (Validacion)
```
**Duracion estimada:** 1 dia
---
## PARTE 5: HISTORIAS DE USUARIO PENDIENTES
### Basadas en Analisis del Frontend
| ID | Historia | Prioridad | Sprint Sugerido |
|----|----------|-----------|-----------------|
| US-FE-001 | Como usuario, quiero ver estadisticas reales en Dashboard | P0 | Sprint 8 |
| US-FE-002 | Como usuario, quiero gestionar productos desde la web | P0 | Sprint 8 |
| US-FE-003 | Como usuario, quiero gestionar pedidos en tiempo real | P0 | Sprint 8 |
| US-FE-004 | Como usuario, quiero exportar reportes en PDF | P1 | Sprint 9 |
| US-FE-005 | Como usuario, quiero exportar datos en Excel | P1 | Sprint 9 |
| US-FE-006 | Como usuario, quiero usar modo oscuro | P2 | Sprint 10 |
| US-FE-007 | Como usuario, quiero instalar la app como PWA | P2 | Sprint 10 |
| US-FE-008 | Como usuario, quiero guardar configuraciones | P1 | Sprint 9 |
---
## PARTE 6: CRITERIOS DE EXITO
### Para Tarea T1 (Purga):
- [ ] ESTADO-REAL-EPICAS.md actualizado y validado
- [ ] Sin contradicciones entre documentos
- [ ] Conteos unificados en todos los inventarios
### Para Tarea T3 (Integracion):
- [ ] 14 de 14 paginas conectadas a APIs reales
- [ ] 0 paginas con datos mock
- [ ] Build exitoso sin errores
### Para Tarea T4 (Documentacion):
- [ ] 100% de componentes documentados
- [ ] Template de ficha estandarizado
- [ ] Indice de componentes creado
### Para Tarea T5 (Funcionalidades):
- [ ] Exportacion PDF funcionando en al menos 3 reportes
- [ ] Exportacion Excel funcionando en al menos 3 reportes
- [ ] Dark mode implementado (si se decide ejecutar)
- [ ] PWA instalable (si se decide ejecutar)
### Para Proyecto Completo:
- [ ] Frontend 100% funcional con APIs reales
- [ ] Documentacion 100% actualizada
- [ ] Build + Lint + Tests pasando
- [ ] Coherencia total entre capas
---
## ANEXOS
### A. Comandos de Validacion
```bash
# Frontend Web
cd /home/isem/workspace-v2/projects/michangarrito/frontend
npm run build
npm run lint
npm run typecheck
# Backend
cd /home/isem/workspace-v2/projects/michangarrito/backend
npm run build
npm run lint
# Mobile
cd /home/isem/workspace-v2/projects/michangarrito/mobile
npx expo doctor
```
### B. Archivos Clave para Actualizacion
```
orchestration/
├── PROXIMA-ACCION.md ← Actualizar estado real
├── PROJECT-STATUS.md ← Actualizar metricas
├── inventarios/
│ ├── FRONTEND_INVENTORY.yml ← Actualizar notas y estado
│ ├── BACKEND_INVENTORY.yml ← Verificar endpoints
│ └── MASTER_INVENTORY.yml ← Unificar conteos
docs/
├── _definitions/
│ └── ESTADO-REAL-EPICAS.md ← CRITICO: Actualizar estados
├── _quick/
│ └── QUICK-API.yml ← Completar endpoints faltantes
```
---
**Documento generado:** 2026-01-20
**Generado por:** Agente Arquitecto - Perfil Orquestador
**Sistema:** SIMCO v4.0.0 + CAPVED
**Proxima revision:** Al iniciar ejecucion