Gograb Admin Mvp Plan

Documentation for GoGrab Admin

GoGrab Admin - MVP Implementation Plan (1 Week)

Documento: MVP Implementation Strategy Fecha: 2025-10-02 Timeline: 5 días laborables Objetivo: POC técnico demostrando integración con module system y routing dinámico

Resumen Ejecutivo

Este documento define el plan de implementación para un MVP simplificado de gograb-admin, optimizado para completarse en 1 semana mientras demuestra los conceptos arquitectónicos clave del sistema de módulos dinámicos.

Scope MVP

✅ MUST HAVE (Crítico - Días 1-3)

Objetivo: Demostrar arquitectura funcional básica

Aplicación Base
- App Angular 20 en /apps/gograb-admin
- Configuración completa en app.config.ts
- Port 5100 (evitar conflicto con gograb-space)
- Build y serve funcionando
Autenticación
- Login component con reactive form
- 2 usuarios mock:
  - [email protected] / admin123 (rol: ADMIN)
  - [email protected] / editor123 (rol: EDITOR)
- authGuard implementado y funcionando
- Redirección post-login a dashboard
Layout Básico
- AppShellComponent (router-outlet + estructura básica)
- HeaderComponent minimal (logo + user profile)
- FooterComponent simple (copyright + versión)
- Sin sidebar complejo (navegación inline por ahora)
Dashboard
- Component simple con 3-4 stat cards
- Datos mock (usuarios totales, activos, etc.)
- Links a secciones principales
Module System Integration
- provideModuleIntegrator() en app.config.ts
- Configuración básica de auto-discovery
- Logging de ciclo de vida habilitado
- Rutas de app base en app.routes.ts

✅ SHOULD HAVE (Demo - Día 4)

Objetivo: Completar demostración de funcionalidad

User Management Integration (CRUD COMPLETO)
- Integración con @gograb-space/user-management
- Rutas cargadas dinámicamente (/list, /create, /:id, /:id/edit)
- UserList con búsqueda y filtros (ya implementado)
- Crear usuarios con UserFormComponent (ya implementado)
- Editar usuarios con modo edit (ya implementado)
- Ver detalles con UserDetailComponent (ya implementado)
- Eliminar usuarios con confirmación (ya implementado)
- Navegación completa entre todas las vistas CRUD
Role-Based Access (Permisos Granulares)
- Guards ya implementados en user-management routes:
  - users:read - Ver lista y detalles
  - users:create - Crear nuevos usuarios
  - users:update - Editar usuarios existentes
  - users:delete - Eliminar usuarios
  - users:manage - Gestión completa (admin only)
- Admin puede acceder a todas las operaciones CRUD
- Editor tiene acceso según permisos asignados
- Validación automática en routing y UI components
Navigation
- Sidebar con acceso a:
  - Dashboard
  - Users → List (con botón Create si tiene permiso)
- Active state indication
- Role-based menu visibility
- Breadcrumbs (posiblemente incluidos en user-management)

🎨 COULD HAVE (Polish - Día 5)

Objetivo: Refinamiento si queda tiempo

Styling
- Uso básico de @libs-core/ui-framework
- Layout responsive simple
- Colores y tipografía consistente
Error Handling
- Error boundary básico
- 404 page
- Login error messages
- Loading states
Logging
- Console logs estructurados
- Eventos de navegación
- Lifecycle events visibles

✅ INCLUDED FROM user-management MODULE

Ya implementado en @gograb-space/user-management (NO requiere desarrollo):

✅ CRUD completo de usuarios (list, create, edit, delete, detail)
✅ UserListComponent con búsqueda y filtros integrados
✅ UserFormComponent para crear/editar (reactive forms completos)
✅ UserDetailComponent para ver información completa del usuario
✅ UserDeleteConfirmComponent para confirmación de eliminación
✅ Routes completas con guards: /list, /create, /:id, /:id/edit, /admin/manage
✅ Guards aplicados (authGuard, permissionGuard, roleGuard)
✅ Mock data completo con UserMockApi
✅ Permisos granulares (users:read, users:create, users:update, users:delete, users:manage)

IMPACTO EN MVP: Al integrar user-management dinámicamente, el MVP obtiene automáticamente funcionalidad CRUD completa y profesional. Solo necesitamos:

Configurar provideModuleIntegrator correctamente
Asegurar que las rutas se cargan dinámicamente
Configurar mock users con permisos apropiados

❌ OUT OF SCOPE (Post-MVP)

Diferido a futuras iteraciones:

❌ Tests E2E con Playwright (solo testing manual para MVP)
❌ User preferences y settings avanzados
❌ Notificaciones push y toasts elaborados
❌ Módulos adicionales más allá de user-management
❌ Footer complejo con múltiples secciones (solo footer simple incluido)

Arquitectura Simplificada

Directory Structure

apps/gograb-admin/
├── src/
│   ├── app/
│   │   ├── core/
│   │   │   └── layout/
│   │   │       ├── app-shell.component.ts (100 líneas)
│   │   │       ├── app-shell.component.html (30 líneas)
│   │   │       ├── header.component.ts (80 líneas)
│   │   │       ├── header.component.html (20 líneas)
│   │   │       ├── footer.component.ts (40 líneas)
│   │   │       └── footer.component.html (15 líneas)
│   │   ├── features/
│   │   │   ├── auth/
│   │   │   │   ├── login.component.ts (120 líneas)
│   │   │   │   ├── login.component.html (40 líneas)
│   │   │   │   └── login.component.scss (30 líneas)
│   │   │   └── dashboard/
│   │   │       ├── dashboard.component.ts (100 líneas)
│   │   │       ├── dashboard.component.html (50 líneas)
│   │   │       └── dashboard.component.scss (20 líneas)
│   │   ├── app.component.ts (30 líneas)
│   │   ├── app.config.ts (80 líneas)
│   │   └── app.routes.ts (50 líneas)
│   ├── main.ts (20 líneas)
│   ├── styles.scss (50 líneas)
│   └── index.html (25 líneas)
├── project.json
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.mts

Total estimado: ~755 líneas de código (55 líneas adicionales para footer)

Component Hierarchy

AppComponent (root)
└── Router Outlet
    ├── LoginComponent (/login)
    └── AppShellComponent (authenticated routes)
        ├── HeaderComponent (top)
        ├── Router Outlet (main content)
        │   ├── DashboardComponent (/dashboard)
        │   └── UserManagementModule routes (/users/*)
        │       ├── UserListComponent (/users/list)
        │       ├── UserFormComponent (/users/create, /users/:id/edit)
        │       ├── UserDetailComponent (/users/:id)
        │       └── UserDeleteConfirmComponent (modal)
        ├── FooterComponent (bottom)
        └── (inline nav or simple sidebar)

Dependencias Core

// app.config.ts dependencies
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideStore } from '@ngxs/store';
import { authInterceptor, contextInterceptor } from '@libs-core/security';
import { mockHttpInterceptor, provideMockApi } from '@libs-core/mock-api';
import { provideLogger, LogLevel, ConsoleAppender } from '@libs-core/log-system';
import { provideEventBus } from '@libs-core/event-system';
import { provideModuleIntegrator } from '@libs-core/module-integrator';
import { UserState, UserMockApi } from '@libs-core/user-management';

Mock Data Strategy

Authentication Mock

// Mock API endpoint: POST /api/auth/login
const mockUsers = [
  {
    email: '[email protected]',
    password: 'admin123',
    profile: {
      id: '1',
      tenantId: 'default-tenant',
      email: '[email protected]',
      displayName: 'Admin User',
      role: { id: 'admin', name: 'Administrator', level: 100 }
    },
    token: 'mock-jwt-token-admin'
  },
  {
    email: '[email protected]',
    password: 'editor123',
    profile: {
      id: '2',
      tenantId: 'default-tenant',
      email: '[email protected]',
      displayName: 'Editor User',
      role: { id: 'editor', name: 'Editor', level: 50 }
    },
    token: 'mock-jwt-token-editor'
  }
];

Dashboard Stats Mock

// Mock API endpoint: GET /api/dashboard/stats
const mockStats = {
  totalUsers: 12,
  activeUsers: 8,
  newToday: 2,
  lastLogin: '2025-10-02T10:30:00Z'
};

User List Mock

Reutilizar mock data existente de @gograb-space/user-management/UserMockApi.

Implementation Plan (Day by Day)

📅 Day 1 - Foundation (6-8 hours)

Objetivo: App básica funcionando y sirviendo

Tareas:

✅ Crear app con Nx: npx nx g @nx/angular:app gograb-admin
✅ Configurar port 5100 en project.json
✅ Setup app.component.ts básico
✅ Crear app.config.ts con todos los providers
✅ Crear app.routes.ts (estructura básica)
✅ Verificar build: npx nx build gograb-admin
✅ Verificar serve: npx nx serve gograb-admin
✅ Configurar tsconfig paths si es necesario

Entregable: App vacía sirviendo en http://localhost:5100

Validación:

npx nx serve gograb-admin
# Browser: http://localhost:5100
# Debe mostrar página básica sin errores de consola

📅 Day 2 - Authentication Flow (6-8 hours)

Objetivo: Login funcional con mock authentication

Tareas:

✅ Crear LoginComponent con reactive form
✅ Implementar login form HTML y validaciones
✅ Crear mock auth endpoint en mock-api config
✅ Implementar login service con JWT mock
✅ Crear AppShellComponent (layout básico)
✅ Implementar authGuard en routes
✅ Configurar redirección login → dashboard
✅ Test manual: login con admin y editor

Entregable: Login → Dashboard flow funcionando

Validación:

# Test 1: Sin autenticación → redirect a /login
# Test 2: Login con [email protected] → acceso a dashboard
# Test 3: Login con [email protected] → acceso a dashboard
# Test 4: Token guardado en localStorage
# Test 5: Logout funcional (si implementado)

📅 Day 3 - Dashboard & Module Integration (6-8 hours)

Objetivo: Dashboard funcional + module system configurado

Tareas:

✅ Crear DashboardComponent con stat cards
✅ Mock dashboard stats API endpoint
✅ HeaderComponent con user profile display
✅ FooterComponent simple (copyright, versión, links básicos)
✅ Configurar provideModuleIntegrator en app.config
✅ Verificar logs de module lifecycle en consola
✅ Preparar integración con user-management routes
✅ Test navegación entre dashboard y login
✅ Verificar que logging system funciona

Entregable: Dashboard con stats + module system inicializado

Validación:

# Test 1: Dashboard muestra stats mock
# Test 2: Console logs muestran:
#   - "IntegratorService initialized"
#   - "Module discovery started"
#   - "Module 'user-management' discovered"
# Test 3: Header muestra nombre de usuario logueado

📅 Day 4 - User Management Integration & CRUD Completo (6-8 hours)

Objetivo: Integración completa con user-management + CRUD funcionando end-to-end

Tareas:

✅ Integrar user-management routes dinámicamente
✅ Verificar dynamic route loading (todas las rutas CRUD):
- /users/list - Lista con búsqueda y filtros
- /users/create - Formulario de creación
- /users/:id - Vista de detalles
- /users/:id/edit - Formulario de edición
- Eliminación con confirmación
✅ Configurar permisos mock en usuarios (admin con todos, editor limitado)
✅ Crear sidebar o nav menu con:
- Link a Dashboard
- Link a Users
- Botón "Create User" (si tiene permiso users:create)
✅ Test flujo completo CRUD:
- Ver lista → Ver detalle → Editar → Guardar
- Ver lista → Crear nuevo → Guardar
- Ver lista → Eliminar → Confirmar
✅ Implementar role-based UI visibility
✅ Verificar logs de module lifecycle completo
✅ Test con ambos usuarios (admin CRUD completo, editor solo lectura)

Entregable: User management CRUD completo funcionando con permisos granulares

NOTA IMPORTANTE: Como user-management ya tiene TODO implementado, este día se enfoca en:

Configuración correcta del module integrator
Asegurar que las rutas se cargan dinámicamente
Configurar mock users con permisos apropiados
Validar que TODA la funcionalidad CRUD funciona correctamente

Validación CRUD Completo:

# Test 1: Ver Lista de Usuarios
- Admin login → navegar a /users/list
- Ver lista completa con botones "Create", "Edit", "Delete"
- Búsqueda y filtros funcionan

# Test 2: Crear Usuario
- Click en "Create User" → /users/create
- Llenar formulario (email, nombre, rol)
- Guardar → redirect a /users/list
- Nuevo usuario aparece en lista

# Test 3: Ver Detalles
- Click en un usuario → /users/:id
- Ver información completa
- Botón "Edit" visible para admin

# Test 4: Editar Usuario
- Desde detalle, click "Edit" → /users/:id/edit
- Modificar datos
- Guardar → ver cambios reflejados

# Test 5: Eliminar Usuario
- Desde lista, click "Delete"
- Modal de confirmación aparece
- Confirmar → usuario eliminado de lista

# Test 6: Permisos Editor
- Editor login → /users/list
- Ver lista pero SIN botones "Create", "Delete"
- Puede ver detalles pero NO editar
- Permisos validados en routing y UI

# Test 7: Console Logs Lifecycle
# Console logs muestran:
#   - "Module 'user-management' configured"
#   - "Module 'user-management' initialized"
#   - "Module 'user-management' started"
#   - "Routes registered for user-management"
# Test 4: Navegación fluida sin reloads
# Test 5: Sidebar muestra opciones según role

📅 Day 5 - Polish & Validation (6-8 hours)

Objetivo: Refinamiento y validación completa del POC

Tareas:

✅ Aplicar styling básico con ui-framework (opcional)
✅ Implementar loading states en login y dashboard
✅ Agregar error handling básico
✅ Crear 404 page
✅ Mejorar mensajes de log para demo
✅ Testing manual completo de todos los flujos
✅ Documentar resultados del POC
✅ Preparar demo para stakeholders

Entregable: POC completo y documentado

Validación Manual Completa:

# Flujo 1: Happy Path Admin
1. Abrir http://localhost:5100
2. Login como [email protected] / admin123
3. Ver dashboard con stats
4. Navegar a Users
5. Ver lista de usuarios
6. Verificar console logs del ciclo de vida
7. Logout (si implementado)

# Flujo 2: Happy Path Editor
1. Login como [email protected] / editor123
2. Ver dashboard con stats
3. Navegar a Users (si tiene permiso)
4. Ver lista de usuarios (sin botones de edición)
5. Verificar visibilidad limitada en sidebar

# Flujo 3: Error Cases
1. Login con credenciales incorrectas → mensaje de error
2. Acceso directo a /users sin login → redirect a /login
3. Navegar a /unknown-route → 404 page
4. Token expirado (simular) → re-login

# Flujo 4: Module System Demo
1. Abrir DevTools Console
2. Login y navegar a dashboard
3. Observar logs:
   ✓ Module discovery
   ✓ Module configuration
   ✓ Module initialization
   ✓ Module start
   ✓ Route registration
4. Navegar a /users → observar lazy loading
5. Verificar que rutas vienen de user-management module

Success Criteria

Funcionales

Usuario puede hacer login con 2 roles diferentes (admin, editor)
Dashboard muestra información básica post-login
Navegación a /users carga el módulo user-management
Lista de usuarios se muestra correctamente
Role-based access funciona (admin vs editor)
Logout funcional (opcional para MVP)

Técnicos

provideModuleIntegrator() configurado correctamente
Console logs muestran ciclo de vida completo del módulo
Rutas de user-management se cargan dinámicamente
authGuard y roleGuard funcionan correctamente
No hay errores de TypeScript en build
No hay errores de runtime en console (warnings aceptables)
App sirve en port 5100 sin conflictos

Demostración

POC demuestra arquitectura de module system
POC demuestra dynamic route loading
POC demuestra autenticación y autorización básica
Logs de lifecycle son visibles y comprensibles
Navegación es fluida sin page reloads

Risks & Mitigation

HIGH RISK

Risk: provideModuleIntegrator API no está completamente implementado

Probability: Medium (40%)
Impact: High
Mitigation:
- Verificar implementación en Day 1
- Fallback: Usar importación manual de rutas con comentarios explicativos
- Documentar limitación y plan de evolución

Risk: Estimación de tiempo muy optimista

Probability: Medium (50%)
Impact: High
Mitigation:
- Priorización estricta Must/Should/Could
- Días 1-3 son críticos, 4-5 son enhancement
- Reducir scope de Day 4-5 si es necesario

MEDIUM RISK

Risk: Integración con user-management más compleja de lo esperado

Probability: Low (25%)
Impact: Medium
Mitigation:
- Usar rutas existentes tal cual
- No modificar módulo user-management
- Solo integración, no customización

Risk: Mock API configuration issues

Probability: Low (20%)
Impact: Medium
Mitigation:
- Reutilizar UserMockApi existente
- Crear mocks simples JSON si es necesario
- No crear sistema mock complejo

LOW RISK

Risk: Styling consume demasiado tiempo

Probability: High (60%)
Impact: Low
Mitigation:
- Defer styling a Day 5
- Usar browser defaults si es necesario
- Funcional > Bonito para POC

Post-MVP Evolution

Immediate Next Steps (Semana 2)

Tests E2E
- Setup Playwright
- Tests de login flow
- Tests de navegación básica
CRUD de Usuarios
- User create form
- User edit form
- User delete confirmation
Permisos Granulares
- Permission entities
- permissionGuard con permisos específicos
- UI directivas con permisos

Future Enhancements

Sidebar completo con íconos
Footer component
Breadcrumbs dinámicos
Search y filtrado avanzado
User settings y preferences
Notifications system
Error boundary elaborado
Loading skeletons
Animaciones y transiciones

Comandos Útiles

# Crear la aplicación
npx nx g @nx/angular:app gograb-admin --directory=apps/gograb-admin

# Servir la aplicación
npx nx serve gograb-admin

# Build production
npx nx build gograb-admin

# Lint
npx nx lint gograb-admin

# Test (cuando se agreguen)
npx nx test gograb-admin

# Ver graph de dependencias
npx nx graph

# Ver project details
npx nx show project gograb-admin

Conclusión

Este plan de implementación MVP de 1 semana está diseñado para:

✅ Demostrar arquitectura - Module system y dynamic routing funcionando ✅ Ser realista - Scope ajustado a timeline sin comprometer objetivos ✅ Ser flexible - Priorización clara permite ajustes durante ejecución ✅ Ser completo - POC técnico funcional que valida conceptos clave

El MVP resultante será una base sólida para iteraciones futuras, con la arquitectura correcta desde el inicio y un path claro de evolución hacia el sistema completo especificado en gograb-admin-requirements.md.

Próximo paso: Comenzar Day 1 - Foundation

Comando inicial:

npx nx g @nx/angular:app gograb-admin --directory=apps/gograb-admin --routing --style=scss --standalone --prefix=app