v2.0Febrero 2026
Paid Media Reporting Tool
Screen Registry & Sprint Roadmap - Detalle extendido con descripcion funcional, tabs/vistas internas, modales, estados especiales y APIs involucradas por cada pantalla.
20
Pantallas
4
Sprints
2 semanas
Por sprint
2 devs full-time
Equipo
Vista General
Timeline del Proyecto
8 semanas de desarrollo divididas en 4 sprints. Cada sprint entrega pantallas funcionales y deployables.
S1
S1
Sprint 1Semanas 1-2
Foundations
AuthClientes
1
2
3
4
4pantallas
S2
S2
Sprint 2Semanas 3-4
Paid Media core
Paid Media
5
6
7
8
4pantallas
S3
S3
Sprint 3Semanas 5-6
Paid Media completo
Paid MediaOrganic
9
10
11
12
13
14
15
7pantallas
S4
S4
Sprint 4Semanas 7-8
Organic completo + Ops + Export + Polish + Deploy a produccion.
OrganicAdmin
16
17
18
19
20
5pantallas
Modulos:AuthClientesPaid MediaOrganicAdmin
01 / Detalle de Pantallas
Screen Registry
20 pantallas principales con descripcion funcional completa, tabs internas, modales y estados especiales.
Tabs / Vistas
- Vista unica
Modales & Overlays
- Forgot Password: modal con input de email y confirmacion de envio de link de reset
Estados Especiales
- Error: credenciales invalidas (inline)
- Error: cuenta no verificada
- Loading state en submit (spinner en boton)
- Redirect post-login segun rol del usuario
APIs Involucradas
- Supabase Auth
- Google OAuth
Tabs / Vistas
- Vista unica
Modales & Overlays
- Email verification: overlay post-registro confirmando envio de mail
Estados Especiales
- Error: email ya registrado
- Error: contrasenas no coinciden (inline)
- Loading state en submit
- Success: pantalla de confirmacion / redirect
APIs Involucradas
- Supabase Auth
- Google OAuth
Tabs / Vistas
- Vista unica
Modales & Overlays
- Ninguno
Estados Especiales
- Error: codigo incorrecto (inline)
- Error: codigo expirado + boton Resend
- Timer regresivo para reenvio (ej: 60s)
- Loading state en validacion
APIs Involucradas
- Supabase Auth (TOTP)
Tabs / Vistas
- Vista de tarjetas (default)
- Vista de tabla (alternativa)
Modales & Overlays
- Crear cliente: modal con nombre, logo upload, descripcion, toggle de metricas habilitadas (multiselect)
- Editar cliente: mismo modal prellenado
- Archive cliente: modal de confirmacion
Estados Especiales
- Empty state: sin clientes asignados
- Loading skeleton de tarjetas
- Badge 'Archivado' en clientes inactivos
- Acceso condicional: boton 'Crear' solo para Superadmin/Empleado
APIs Involucradas
- Supabase DB
Tabs / Vistas
- Tarjetas de campana (default)
- Campaign List tabla (tab alternativo)
Modales & Overlays
- Add User: modal con email, rol, permisos por campana (checkbox list)
- Filtros avanzados: drawer lateral con plataforma, estado, rango de fechas, objetivo de campana
Estados Especiales
- Empty state: sin campanas para el cliente
- Loading skeleton por card
- Badge 'API no conectada' si falta una integracion
- Error de integracion: muestra datos disponibles + warning por plataforma caida
APIs Involucradas
- Supabase DB
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Sub-tab dentro de Channel Performance
Modales & Overlays
- Export: modal con formato CSV/Excel, rango de fechas a exportar
- Filtros por columna (dropdown inline en header de tabla)
Estados Especiales
- Empty state
- Loading skeleton de filas
- Row hover: muestra acciones (ver detalle, archivar)
- Paginacion o infinite scroll
- Columnas ordenables (click en header)
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Overview (activa)
- Performance
- Goals
- Ads
Modales & Overlays
- Export: modal con seleccion de metricas y formato (PDF/Excel)
Estados Especiales
- Loading skeleton por KPI card
- Warning parcial: API de una plataforma caida
- Sin datos para el rango seleccionado (empty per card)
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Overview
- Performance (activa)
- Goals
- Ads
Modales & Overlays
- Export: modal con seleccion de graficos a incluir en el PDF
- Key Insight expandido: drawer lateral con explicacion detallada + accion sugerida + benchmark
Estados Especiales
- Loading skeleton por chart (independientes)
- Error por grafico individual (no bloquea la pantalla)
- Sin datos para el periodo
- Toggle activo resaltado en chart de tendencias
- Tipos de insight: Strong Performance (verde), Optimization Opportunity (amarillo), Monitor Frequency (azul)
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Overview
- Performance
- Goals (activa)
- Ads
Modales & Overlays
- Create Goal: modal de 3 pasos (plataforma, metrica, valor objetivo + fecha limite)
- Edit Goal: mismo modal prellenado
- Delete Goal: modal de confirmacion simple
Estados Especiales
- Empty state con CTA 'Crear primer goal'
- Goal 'On track': barra verde + porcentaje
- Goal 'At risk': barra amarilla + porcentaje
- Goal 'Missed': barra roja + valor final
- Goal 'Completado': check icon + fecha de cumplimiento
APIs Involucradas
- Supabase DB (goals)
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Overview
- Performance
- Goals
- Ads (activa)
- Sub-tab: Ad Groups
- Sub-tab: Ads individuales
Modales & Overlays
- Filtros: dropdown con plataforma, estado (activo/pausado/completado)
Estados Especiales
- Empty state por plataforma
- Loading skeleton
- Thumbnail no disponible: placeholder con icono de plataforma
- Badge de estado (Activo/Pausado/Completado) por plataforma
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Tab Ads (padre)
- Ad Groups (activa)
- Ads individuales
Modales & Overlays
- Export: modal con Excel o CSV
- Filtros: dropdown inline con estado del ad group
Estados Especiales
- Empty state
- Loading skeleton de tabla
- Columnas ordenables
- Row click: navega al Ad Group Detail
- Row hover: muestra boton 'Ver detalle'
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Key Metrics (KPI cards)
- Ads del grupo (tabla interna)
Modales & Overlays
- Ninguno
Estados Especiales
- Loading skeleton por seccion
- Empty state en tabla de ads
- Error en carga de datos de targeting
- Breadcrumb: Cliente > Campana > Ad Group
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- Performance Trends (grafico con toggle Impressions/Clicks/CTR)
- Conversion Funnel (visualizacion en embudo)
Modales & Overlays
- Insight expandido: drawer lateral o popover con descripcion, benchmark y accion sugerida
Estados Especiales
- Loading por seccion
- Sin datos de conversion funnel (empty state localizado)
- Preview de creative: imagen/video del ad + badge de plataforma
- Tipos de insight: Strong Performance / Optimization Opportunity / Monitor Frequency
APIs Involucradas
- Meta Ads API
- TikTok Ads API
- Google Ads API
Tabs / Vistas
- All
- TikTok
- YouTube
Modales & Overlays
- Connect Account: modal paso a paso (seleccion plataforma, redirect OAuth, callback y confirmacion)
- Disconnect: modal de confirmacion con advertencia de perdida de datos
- Re-auth: modal de token expirado con boton para reconectar
Estados Especiales
- Cuenta conectada: badge verde + timestamp de ultimo sync
- Token expirado: badge naranja + boton Re-auth
- Error de conexion: badge rojo + mensaje de error de la API
- Sincronizando: spinner + 'Actualizando datos...'
- Empty state: sin cuentas conectadas + CTA 'Conectar primera cuenta'
APIs Involucradas
- Instagram Graph API
- Facebook Graph API
- TikTok Organic API
- YouTube Data API v3
Tabs / Vistas
- Overview (activa)
- Audience Insights
Modales & Overlays
- Export: modal con formato PDF o CSV, rango de fechas
- Top Content item: modal con metricas completas del post/video
Estados Especiales
- Loading skeleton por seccion
- Error de sync: banner superior con boton 'Reintentar'
- Sin datos para el periodo seleccionado
- Variantes de UI por plataforma (Instagram, Facebook, TikTok, YouTube)
APIs Involucradas
- Instagram Graph API
- Facebook Graph API
- TikTok Organic API
- YouTube Analytics API
Tabs / Vistas
- Overview
- Audience Insights (activa)
Modales & Overlays
- Ninguno
Estados Especiales
- Loading skeleton por chart
- Datos insuficientes: banner informativo
- Empty state por rango de fechas demasiado corto
- Variantes por plataforma (Instagram/Facebook: edad, genero, ciudades; TikTok: top videos; YouTube: watch time, dispositivos)
APIs Involucradas
- Instagram Graph API
- Facebook Graph API
- TikTok Organic API
- YouTube Analytics API
Tabs / Vistas
- Todos los usuarios (tabla)
- Invitaciones pendientes
Modales & Overlays
- Invite User: modal con email, dropdown de rol, multiselect de clientes asignados
- Edit User: modal prellenado para cambiar rol y clientes asignados
- Deactivate User: modal de confirmacion
Estados Especiales
- Badge 'Pending' para invitaciones sin aceptar
- Usuario inactivo: fila desaturada + badge 'Inactivo'
- Loading de envio de invitacion
- Error: email ya registrado
- El usuario logueado no puede editarse ni desactivarse a si mismo
APIs Involucradas
- Supabase Auth (invites)
- Supabase DB (roles)
Tabs / Vistas
- Paid Media (Meta, TikTok, Google Ads)
- Organic (Instagram, Facebook, TikTok Organic, YouTube)
Modales & Overlays
- Disconnect: modal de confirmacion con advertencia de cuentas que dejaran de sincronizar
- Re-auth: modal de token expirado con boton Reconectar
- Error detalle: modal/drawer con descripcion del error + pasos para resolver
Estados Especiales
- Conectado: badge verde + timestamp ultimo sync + cuentas conectadas
- Token expirado: badge naranja + boton Re-auth prominente
- Error de conexion: badge rojo + mensaje del error de la API
- Conectando / procesando OAuth: spinner full-card
- No conectado: card gris + boton 'Conectar' prominente
APIs Involucradas
- Meta OAuth 2.0
- TikTok OAuth 2.0
- Google OAuth 2.0
- Supabase DB (tokens cifrados)
Tabs / Vistas
- Perfil (nombre, email, foto)
- Seguridad (contrasena, 2FA)
Modales & Overlays
- Cambiar contrasena: modal (solo para usuarios email+password)
- Configurar 2FA: modal con QR code TOTP + campo de verificacion de 6 digitos
- Desactivar 2FA: modal de confirmacion
Estados Especiales
- Campos email/nombre read-only para usuarios con Google SSO
- Success toast al guardar cambios
- Error de validacion inline en cada campo
- Badge 'SSO' para usuarios conectados con Google
APIs Involucradas
- Supabase Auth
Tabs / Vistas
- Info del cliente (nombre, logo, descripcion)
- Metricas habilitadas (toggles por modulo y plataforma)
- Usuarios asignados (lista + acceso rapido a User Management)
Modales & Overlays
- Create Client: modal o pagina dedicada con nombre, logo upload, descripcion, metricas habilitadas
- Archive Client: modal de confirmacion con advertencia de datos historicos
Estados Especiales
- Cliente archivado: badge 'Archivado', acceso solo lectura
- Logo upload: preview en tiempo real + validacion de formato y tamano
- Guardar: loading state + success toast
- Error: nombre de cliente duplicado
APIs Involucradas
- Supabase DB (clientes)
- Supabase Storage (logos)
02 / Roadmap en Sprints
Plan de Ejecucion
4 sprints de 2 semanas. Dev A = Frontend/UI. Dev B = Backend/Integraciones. Trabajo en paralelo.
Objetivo
Foundations: proyecto configurado, auth funcionando, clients dashboard, infraestructura base.
Entregable
App deployada en staging con auth completo y clients dashboard funcional.
Dev A — Frontend / UI
- Setup Next.js 14 + Tailwind + Shadcn/ui
- Layout base: sidebar, header, breadcrumbs
- Sistema de routing y proteccion de rutas por rol
- Pantalla 1 - Login (email+password + Google SSO)
- Pantalla 2 - Signup
- Pantalla 3 - 2FA
- Pantalla 4 - Clients Dashboard (tarjetas + tabla + modal Crear Cliente)
- Design tokens: colores, tipografia, spacing
- Componentes base: Button, Input, Modal, Badge, Toast, Skeleton
Dev B — Backend / Integraciones
- Solicitar acceso: Meta Ads API (Business Verification)Critico
- Solicitar acceso: TikTok Ads API + TikTok for DevelopersCritico
- Solicitar acceso: Google Ads Developer TokenCritico
- Solicitar acceso: YouTube OAuth app verificationCritico
- Setup Supabase: proyecto, schema de DB inicial
- Auth: Supabase Auth con Google SSO + email+password + 2FA
- Row Level Security (RLS): politicas de acceso por rol
- Setup CI/CD: GitHub Actions + deploy automatico a Vercel (staging)
- Mock data layer completo
- Variables de entorno y secrets management
Pantallas entregadas en este sprint
01Login02Signup032FA04Clients Dashboard
03 / Dependencias Criticas
Acciones Requeridas
Acciones que deben ejecutarse antes o al inicio del proyecto para evitar bloqueos en el desarrollo.
Pendientes (4)
Solicitar TikTok Ads API access
Dev B o PM del proyectoDia 1 del proyecto
Sin TikTok Ads: campana multi-plataforma incompleta.
Solicitar YouTube Data API access
Dev B o PM del proyectoDia 1 del proyecto
Sin YouTube: modulo Organic queda incompleto, no se pueden mostrar metricas de video.
Freeze de diseno
PM + DisenadorFin de Sprint 1 (semana 2)
Cada cambio de diseno post-freeze implica retrabajar pantallas ya desarrolladas.
Definir frecuencia de sync de datos
PM + Dev BSemana 1
Impacta arquitectura de cron jobs, costos de API y UX (timestamp 'Actualizado hace X horas').
Resueltas (2)
Solicitar Meta Ads API access
Dev B o PM del proyectoCompletado
Acceso obtenido correctamente.
Solicitar Google Ads Developer Token
Dev BCompletado
Acceso obtenido correctamente.