Tasks - Product Catalog Module

Convenciones y Alcance del Plan

Plan de ejecución para implementar el módulo Product Catalog siguiendo arquitectura Angular 20 + NGXS con componentes standalone y estrategia OnPush.

Desglose de Trabajo (WBS)

Épica 1: Fundación del Módulo

T-001: Configuración Base del Módulo

Descripción: Crear estructura base del módulo Product Catalog con configuración NGXS y rutas principales.

Cobertura: Infraestructura base para todos los US-001 a US-009

Dependencias: Ninguna

DoD VERIFICABLE:

• ✅ Estructura de carpetas creada según convenciones NX: nx g @nx/angular:lib product-catalog --directory=libs/modules
• ✅ Barrel exports configurados: index.ts exporta todos los componentes públicos
• ✅ NGXS State configurado: nx build product-catalog ejecuta sin errores
• ✅ Rutas principales configuradas: navegación /catalog y /admin/products funcional
• ✅ Tests base: nx test product-catalog --coverage ≥90% coverage
• ✅ Integración con @libs-core/shared-models validada: importación de Product, Category exitosa

Estimación: L | Responsable: Frontend Lead

T-002: Modelos y Contratos de Datos

Descripción: Implementar interfaces TypeScript para Product, Category y DTOs según design.md.

Cobertura: R-001, R-007, R-013 - Estructuras de datos base

Dependencias: T-001

DoD VERIFICABLE:

• ✅ Interfaces Product, Category, ProductImage implementadas según design.md
• ✅ DTOs para CreateProduct, UpdateProduct, ProductFilters definidos
• ✅ Validación de tipos: nx build product-catalog --configuration=production sin errores TypeScript
• ✅ Tests unitarios de modelos: nx test product-catalog --testNamePattern="models" pasa 100%
• ✅ Exportación en barrel: interfaces disponibles desde index.ts

Estimación: M | Responsable: Frontend Developer

T-003: Services Base y HTTP Client

Descripción: Implementar ProductService y CategoryService con métodos HTTP según API contracts del design.md.

Cobertura: R-001, R-004, R-010, R-013 - Comunicación con backend

Dependencias: T-002

DoD VERIFICABLE:

• ✅ ProductService implementado con métodos: getProducts(), getProduct(), createProduct(), updateProduct(), deleteProduct()
• ✅ CategoryService implementado con métodos: getCategories(), createCategory(), updateCategory(), deleteCategory()
• ✅ Error handling y retry logic implementados
• ✅ Tests unitarios servicios: nx test product-catalog --testNamePattern="service" ≥90% coverage
• ✅ Mock API responses configurados para testing
• ✅ Integration tests: nx test product-catalog --testNamePattern="integration" valida HTTP calls

Estimación: L | Responsable: Frontend Developer

Épica 2: Catálogo Público

T-004: NGXS State Management Setup

Descripción: Configurar NGXS store para productos, categorías y filtros con actions, selectors y effects.

Cobertura: US-001, US-002, US-003 - Estado centralizado para catálogo público

Dependencias: T-003

DoD VERIFICABLE:

• ✅ ProductState con actions: LoadProducts, LoadProduct, SetFilters, SetSearchQuery
• ✅ CategoryState con actions: LoadCategories
• ✅ Selectors tipados: getProducts(), getSelectedProduct(), getCategories(), getActiveFilters()
• ✅ Effects para HTTP calls y logging implementados
• ✅ Tests unitarios state: nx test product-catalog --testNamePattern="state" ≥95% coverage
• ✅ DevTools integration: Redux DevTools funcional en desarrollo
• ✅ State persistence: filtros persisten en sessionStorage

Estimación: L | Responsable: Frontend Developer

T-005: Product Catalog Container Component

Descripción: Implementar componente principal del catálogo con grid/lista de productos y paginación.

Cobertura: US-001 (AC-001, AC-002, AC-003, AC-004, AC-005) - Vista principal del catálogo

Dependencias: T-004

DoD VERIFICABLE:

• ✅ ProductCatalogComponent standalone implementado con OnPush strategy
• ✅ Toggle vista grid/lista funcional
• ✅ Paginación server-side: máximo 20 productos por página
• ✅ Loading skeletons durante cargas
• ✅ Responsive design: breakpoints móvil, tablet, desktop
• ✅ Tests unitarios componente: nx test product-catalog --testNamePattern="ProductCatalog" ≥90% coverage
• ✅ E2E test: nx e2e product-catalog-e2e --testNamePattern="catalog navigation" pasa

Estimación: L | Responsable: Frontend Developer

T-006: Product Card Component

Descripción: Crear componente de tarjeta de producto reutilizable para grid y lista.

Cobertura: US-001 (AC-001, AC-002) - Visualización individual de productos

Dependencias: T-005

DoD VERIFICABLE:

• ✅ ProductCardComponent standalone con inputs: product, viewMode, showActions
• ✅ Lazy loading de imágenes con intersection observer
• ✅ Estados: loading, error, success para imágenes
• ✅ Acciones: view details, add to cart (eventos emitidos)
• ✅ Responsive: adaptación automática a grid/lista
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ProductCard" ≥95% coverage
• ✅ Visual regression tests: screenshots consistent across browsers

Estimación: M | Responsable: Frontend Developer

T-007: Search and Filters System

Descripción: Implementar barra de búsqueda y panel de filtros con múltiples criterios.

Cobertura: US-002 (AC-006, AC-007, AC-008, AC-009, AC-010, AC-011) - Sistema de búsqueda completo

Dependencias: T-006

DoD VERIFICABLE:

• ✅ ProductSearchComponent con debounce 300ms implementado
• ✅ ProductFiltersComponent con filtros: categoría, precio, disponibilidad, ordenamiento
• ✅ Filtros combinados con query parameters en URL
• ✅ Chips de filtros activos con opción de remover
• ✅ Persistencia en sessionStorage funcional
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="search|filter" ≥90% coverage
• ✅ Performance test: búsqueda <500ms con 1000+ productos

Estimación: XL | Responsable: Frontend Developer

Épica 3: Vista Detallada de Producto

T-008: Product Detail Container

Descripción: Implementar vista detallada de producto con toda la información y acciones.

Cobertura: US-003 (AC-012, AC-013, AC-014, AC-015, AC-016, AC-017) - Vista completa del producto

Dependencias: T-007

DoD VERIFICABLE:

• ✅ ProductDetailComponent standalone con ruta parametrizada
• ✅ Carga de producto por ID con loading states
• ✅ Breadcrumb navigation implementado
• ✅ Productos relacionados por categoría mostrados
• ✅ SEO meta tags dinámicos por producto
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ProductDetail" ≥90% coverage
• ✅ E2E test: nx e2e product-catalog-e2e --testNamePattern="product detail flow" pasa

Estimación: L | Responsable: Frontend Developer

T-009: Product Gallery Component

Descripción: Crear galería de imágenes con zoom, navegación y optimización.

Cobertura: US-003 (AC-012) - Visualización avanzada de imágenes

Dependencias: T-008

DoD VERIFICABLE:

• ✅ ProductGalleryComponent con navegación thumbnail/main
• ✅ Zoom functionality con gestos táctiles
• ✅ Lazy loading de imágenes con WebP support
• ✅ Keyboard navigation (arrow keys) implementado
• ✅ Responsive: swipe gestures en móvil
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ProductGallery" ≥85% coverage
• ✅ Performance: carga inicial <2s con 10 imágenes

Estimación: L | Responsable: Frontend Developer

Épica 4: Panel Administrativo

T-010: Admin Dashboard Setup

Descripción: Configurar dashboard administrativo con rutas protegidas y navegación.

Cobertura: US-004, US-005, US-006, US-007, US-008 - Base para administración

Dependencias: T-009

DoD VERIFICABLE:

• ✅ ProductAdminComponent con rutas protegidas
• ✅ Guards aplicados: authGuard, permissionGuard con permisos catalog.admin
• ✅ Navegación administrativa: productos, categorías, inventario
• ✅ Breadcrumb admin navigation implementado
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ProductAdmin" ≥90% coverage
• ✅ E2E test: nx e2e product-catalog-e2e --testNamePattern="admin access" valida permisos

Estimación: M | Responsable: Frontend Developer

T-011: Product Management CRUD

Descripción: Implementar gestión completa de productos con formularios de creación y edición.

Cobertura: US-004 (AC-018, AC-019, AC-020, AC-021, AC-022, AC-023) - CRUD administrativo

Dependencias: T-010

DoD VERIFICABLE:

• ✅ ProductFormComponent para crear/editar con validaciones ReactiveForm
• ✅ ProductListComponent administrativa con acciones CRUD
• ✅ Modal de confirmación para eliminaciones
• ✅ Vista previa de producto antes de publicar
• ✅ Estados: borrador, publicado, archivado con toggle
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ProductForm|ProductList" ≥90% coverage
• ✅ E2E test: nx e2e product-catalog-e2e --testNamePattern="product crud" flujo completo

Estimación: XL | Responsable: Frontend Developer

T-012: Category Management System

Descripción: Implementar gestión jerárquica de categorías con drag & drop.

Cobertura: US-005 (AC-024, AC-025, AC-026, AC-027, AC-028) - Gestión de categorías

Dependencias: T-011

DoD VERIFICABLE:

• ✅ CategoryManagerComponent con tree view jerárquico
• ✅ CRUD completo de categorías con validaciones
• ✅ Drag & drop reordering con Angular CDK
• ✅ Asignación múltiple de productos a categorías
• ✅ Configuración de metadatos por categoría
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="CategoryManager" ≥90% coverage
• ✅ E2E test: drag & drop functionality verificado

Estimación: XL | Responsable: Frontend Developer

T-013: Inventory Management

Descripción: Implementar control de inventario con alertas y historial.

Cobertura: US-006 (AC-029, AC-030, AC-031, AC-032, AC-033) - Control de stock

Dependencias: T-012

DoD VERIFICABLE:

• ✅ InventoryManagerComponent con vista de stock actual
• ✅ Alertas de bajo stock configurables por producto
• ✅ Estados: en stock, agotado, pre-orden con indicadores visuales
• ✅ Historial de movimientos con paginación
• ✅ Actualización masiva de stock con import CSV
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="Inventory" ≥90% coverage
• ✅ Integration test: alertas de stock funcionan correctamente

Estimación: L | Responsable: Frontend Developer

T-014: Pricing and Promotions

Descripción: Implementar gestión de precios y sistema de promociones.

Cobertura: US-007 (AC-034, AC-035, AC-036, AC-037, AC-038) - Gestión de precios

Dependencias: T-013

DoD VERIFICABLE:

• ✅ PricingManagerComponent con gestión de precios base y promocionales
• ✅ Programación de promociones con date pickers
• ✅ Descuentos por porcentaje y monto fijo
• ✅ Visualización de precio original vs promocional
• ✅ Códigos de descuento con validación de vigencia
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="Pricing" ≥90% coverage
• ✅ E2E test: flujo completo de creación y aplicación de promoción

Estimación: L | Responsable: Frontend Developer

T-015: Image Management System

Descripción: Implementar sistema de gestión de imágenes con upload y optimización.

Cobertura: US-008 (AC-039, AC-040, AC-041, AC-042, AC-043) - Gestión de imágenes

Dependencias: T-014

DoD VERIFICABLE:

• ✅ ProductImageManagerComponent con drag & drop upload
• ✅ Reordenamiento de imágenes con Angular CDK
• ✅ Designación de imagen principal
• ✅ Optimización automática: WebP, múltiples tamaños
• ✅ Vista previa y edición básica (crop, rotate)
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="ImageManager" ≥85% coverage
• ✅ E2E test: upload y gestión de imágenes funcional

Estimación: XL | Responsable: Frontend Developer

Épica 5: Seguridad y Optimización

T-016: Security Implementation

Descripción: Implementar control de acceso granular con @libs-core/security.

Cobertura: US-009 (AC-044, AC-045, AC-046, AC-047, AC-048, AC-049) - Seguridad del módulo

Dependencias: T-015

DoD VERIFICABLE:

• ✅ Guards aplicados: authGuard, permissionGuard en todas las rutas admin
• ✅ Directivas *hasPermission aplicadas en templates administrativos
• ✅ Permisos granulares: catalog.read, catalog.write, catalog.admin implementados
• ✅ Multi-tenant context con ContextService integrado
• ✅ Validación de permisos antes de operaciones CRUD
• ✅ Tests unitarios: nx test product-catalog --testNamePattern="security|guard|permission" ≥95% coverage
• ✅ E2E test: acceso denegado para usuarios sin permisos verificado

Estimación: M | Responsable: Frontend Developer

T-017: Performance Optimization

Descripción: Optimizar performance con lazy loading, cache y mejoras UX.

Cobertura: NFR-001, NFR-004 - Performance y UX requirements

Dependencias: T-016

DoD VERIFICABLE:

• ✅ Lazy loading de rutas: catalog y admin modules
• ✅ OnPush strategy en todos los componentes verificado
• ✅ Virtual scrolling para listas largas implementado
• ✅ Cache de categorías 10 minutos funcional
• ✅ Debounce 300ms en búsquedas verificado
• ✅ Performance test: nx test product-catalog --testNamePattern="performance" <2s carga inicial
• ✅ Lighthouse audit: score ≥90 en móvil

Estimación: M | Responsable: Frontend Developer

T-018: Testing and Documentation

Descripción: Completar suite de tests y documentación técnica del módulo.

Cobertura: Todos los US - Quality assurance completo

Dependencias: T-017

DoD VERIFICABLE:

• ✅ Unit tests coverage: nx test product-catalog --coverage ≥90%
• ✅ Integration tests: nx test product-catalog --testNamePattern="integration" ≥5 escenarios
• ✅ E2E tests: nx e2e product-catalog-e2e flujos críticos cubiertos
• ✅ Performance tests: <2s carga inicial, <500ms filtros
• ✅ API documentation: endpoints documentados con ejemplos
• ✅ Component documentation: Storybook stories para componentes principales
• ✅ README.md actualizado con guías de uso

Estimación: M | Responsable: Frontend Developer

Secuenciación y Hitos

Milestone 1: Fundación (Semana 1-2)

Entregables: T-001, T-002, T-003, T-004 Criterios VERIFICABLES:

• ✅ nx build product-catalog ejecuta sin errores
• ✅ nx test product-catalog coverage base ≥90%
• ✅ NGXS DevTools funcional

Milestone 2: Catálogo Público (Semana 3-4)

Entregables: T-005, T-006, T-007 Criterios VERIFICABLES:

• ✅ Navegación /catalog funcional
• ✅ Búsqueda y filtros operativos
• ✅ Performance <2s carga inicial

Milestone 3: Vista Detallada (Semana 5)

Entregables: T-008, T-009 Criterios VERIFICABLES:

• ✅ Vista detalle /catalog/:id funcional
• ✅ Galería de imágenes operativa
• ✅ SEO meta tags dinámicos

Milestone 4: Administración (Semana 6-8)

Entregables: T-010, T-011, T-012, T-013, T-014, T-015 Criterios VERIFICABLES:

• ✅ Panel admin /admin/products funcional
• ✅ CRUD completo operativo
• ✅ Gestión de categorías e inventario

Milestone 5: Producción (Semana 9)

Entregables: T-016, T-017, T-018 Criterios VERIFICABLES:

• ✅ Seguridad implementada y validada
• ✅ Performance optimizada
• ✅ Tests completos ≥90% coverage

Quality Gates

Build Gates

• nx build product-catalog --configuration=production sin errores TypeScript
• nx lint product-catalog sin errores ESLint
• Bundle size <500KB gzipped

Test Gates

• nx test product-catalog --coverage ≥90% coverage
• nx e2e product-catalog-e2e todos los tests críticos pasan
• Performance tests <2s carga inicial, <500ms filtros

Security Gates

• Guards aplicados en todas las rutas administrativas
• Permisos validados en operaciones críticas
• Sanitización de inputs verificada

Performance Gates

• Lighthouse score ≥90 en móvil
• Core Web Vitals: LCP <2.5s, FID <100ms, CLS <0.1
• Memory usage <50MB en sesión normal

Riesgos Operativos y Plan de Rollback

Riesgo 1: Performance Issues

Contingencia: Implementar paginación más agresiva, reducir payload de API Rollback: Versión anterior con funcionalidad reducida

Riesgo 2: Security Vulnerabilities

Contingencia: Hotfix de seguridad, auditoría de permisos Rollback: Deshabilitar funcionalidades administrativas hasta fix

Riesgo 3: API Dependencies

Contingencia: Mock API extendido, modo offline parcial Rollback: Modo read-only hasta restaurar API