Frontend (Next.js 14 - App Router)

Páginas Requeridas

1. Dashboard Principal (/)

• Estadísticas generales:

  • Total de jobs hoy/semana/mes
  • Tasa de éxito/fallo
  • Emails enviados totales

• Acceso rápido a crear nuevo job

2. Lista de Jobs (/jobs)

• Tabla con columnas:
  • ID, Subject, Recipients (count), Status, Progress, Created At, Actions
• Filtros:
  • Por status (tabs o dropdown)
  • Búsqueda por subject
  • Rango de fechas
• Funcionalidad:
  • Paginación via URL (?page=2&pageSize=20)
  • Refresh automático cada 5 segundos para jobs activos
  • Indicador visual de progreso (barra de progreso)
  • Acciones: Ver detalle, Reintentar (si failed), Cancelar

3. Crear Job (/jobs/new)

• Formulario con campos:
  • Subject (input text)
  • Body (editor rico con preview HTML)
  • Recipients (textarea, un email por línea, con validación)
• Validaciones en tiempo real:
  • Formato de emails
  • Límite de 1000 recipients con contador
• Acciones: Botón "Enviar Ahora"

4. Detalle de Job (/jobs/[id])

• Información completa:
  • Metadata (subject, createdAt, startedAt, completedAt)
  • Status con badge visual
  • Progreso detallado (X de Y enviados)
  • Tiempo estimado de completado (si processing)
  • Lista de recipients con estado individual
• Tab de Logs con tabla:
  • Timestamp, Email, Status, Error message
  • Filtro por status (success/failed)
  • Paginación
• Acciones contextuales según status

Buenas Prácticas Frontend

Componentes Reutilizables

• <JobStatusBadge />
• <ProgressBar />
• <EmailEditor />
• <DataTable /> con sorting y paginación

Arquitectura

• Server Components: Para data fetching inicial
• Client Components: Para interactividad (forms, filters)
• Loading States: Skeletons durante carga
• Error Boundaries: Manejo graceful de errores
• Optimistic Updates: UI responsiva antes de confirmar API
• Formik + yup: Validación de formularios
• TailwindCSS: Styling consistente y responsive