{{ head.eyebrow }}
{{ head.title }}
{{ ic.search }} Buscar clientes, facturas…
{{ m.label }} {{ m.iconEl }}
{{ m.value }}
{{ m.trendIcon }}{{ m.trend }}
Actividad reciente Ver todo
{{ a.iconEl }}
{{ a.title }}
{{ a.meta }}
{{ a.time }}
{{ ic.checkcircle }} Todos los sistemas operativos

Los 3 nodos de mensajería y los conectores por carrier responden con normalidad. Última verificación hace 12 s.

Accesos rápidos
EN VIVO · refresco 5 s Región primaria · Caracas-1
{{ m.iconEl }}{{ m.label }} {{ m.badge }}
{{ m.value }}
Rendimiento de mensajería Últimos 60 min · throughput vs latencia
Throughput (msg/s) Latencia (ms)
Alertas activas
{{ al.iconEl }}
{{ al.severity }}{{ al.time }}
{{ al.title }}
{{ ic.search }}
ClienteEstadoPlanUso de cuotaAcciones
{{ c.initials }}
{{ c.name }}
{{ c.rif }}
{{ c.statusLabel }}
{{ c.plan }}
{{ c.usedLabel }}{{ c.pctLabel }}
{{ m.label }}
{{ m.value }}
{{ m.trend }}
Volumen por franja horaria
00:0012:00Ahora
Enviados Entregados Fallidos
Rendimiento por carrier
{{ c.name }}{{ c.success }}
Latencia media {{ c.latency }} · {{ c.volume }}
{{ ic.alert }}

Trata las claves de producción como contraseñas. Nunca las expongas en el front-end ni en repositorios. Al revocar una clave, todas las integraciones que la usen dejarán de funcionar de inmediato.

{{ k.name }}{{ k.env }}{{ k.statusLabel }}
{{ k.key }}
Creada {{ k.created }}Último uso {{ k.lastUsed }}
Eventos suscritos
{{ e.iconEl }}{{ e.label }}
{{ s.iconEl }}
{{ s.title }}
{{ s.desc }}
{{ s.state }}
{{ m.label }}{{ m.iconEl }}
{{ m.value }}
{{ m.sub }}
Ingresos vs. volumen de mensajería
EneJunDic
Ingresos (US$)Mensajes (M)
Top clientes por ingreso
{{ t.rank }}{{ t.name }}{{ t.amount }}
{{ ic.search }}
FacturaClienteMontoEstadoVencimientoAcc.
{{ i.id }} {{ i.client }} {{ i.amount }} {{ i.statusLabel }} {{ i.due }}
Analítica de cobros
{{ p.label }}{{ p.value }}
Tasa de cobranza87%
Acciones rápidas
{{ m.iconEl }}{{ m.label }}
{{ m.value }}
{{ m.sub }}
Crear nueva campaña

Te guiamos paso a paso. Puedes programarla o enviarla al instante.

{{ st.n }}{{ st.label }}
{{ msgLen }} / 160 caract. · {{ msgSeg }} SMS
Variables:{nombre}{ref}
{{ ic.upload }}
Arrastra un archivo CSV o Excel
o selecciona una lista guardada · máx. 50.000 contactos
Campañas activas
{{ c.name }}{{ c.status }}
{{ c.sub }}
Mis listas
{{ l.iconEl }} {{ l.name }} {{ l.count }}
{{ ic.search }}
NombreTeléfonoListaEstadoAcc.
{{ c.initials }}{{ c.name }}
{{ c.phone }} {{ c.list }} {{ c.statusLabel }}
Listas
{{ l.iconEl }}{{ l.name }}{{ l.count }}
Importar contactos
{{ ic.upload }}
CSV o Excel
Validamos y deduplicamos automáticamente
Estadísticas
{{ st.0 }}{{ st.1 }}

Jerarquía de navegación de 3 niveles (sección › subsección › vista de detalle) separada por perfil. El shell de navegación es compartido; cambian los ítems de menú, el branding de contexto y la densidad. La decisión de fondo: el Admin navega por dominios operativos paralelos, el Cliente por una tarea lineal.

Perfil Administrador
7 secciones · equipo operador
{{ n.iconEl }}{{ n.name }}
{{ n.children }}
Perfil Cliente
2 secciones · empresa usuaria
{{ n.iconEl }}{{ n.name }}
{{ n.children }}
Regla de navegación
El Cliente nunca ve infraestructura, facturación global ni gestión de otros clientes. Su barra prioriza la acción "Nuevo envío".

Cinco flujos críticos que cubren el ciclo de vida completo de un cliente y de una campaña. Cada nodo es una vista real del mockup; los estados alternos (error / vacío) se anotan debajo.

{{ f.tag }}{{ f.title }}
{{ nd.n }}{{ nd.label }} {{ ic.chevron }}
Estado alterno · {{ f.alt }} Error · {{ f.error }}

Qué puede ver y hacer cada rol por módulo. Cliente-Owner administra la cuenta de su empresa; Cliente-Operador solo ejecuta envíos sobre listas existentes.

MóduloAdminCliente-OwnerCliente-Operador
{{ r.mod }}{{ r.c0 }}{{ r.c1 }}{{ r.c2 }}
{{ ic.checkcircle }}Acceso total{{ ic.eye }}Parcial / solo propios{{ ic.ban }}Sin acceso

Estados vacío, de carga y de error para los flujos críticos. Un patrón consistente evita "pantallas muertas" y da al usuario siempre una acción de salida.

Vacío
{{ ic.contacts }}
Aún no tienes contactos

Importa tu primera lista para empezar a enviar campañas.

Cargando
Cargando clientes…
Error
{{ ic.alert }}
No se pudo cargar

Hubo un problema de conexión con el servicio. Tus datos están seguros.

Reglas del patrón
Vacío → siempre incluye ilustración/ícono neutro, una frase que explique y un CTA que resuelva el vacío.
Carga → skeleton con la forma del contenido real (no spinner a pantalla completa) para reducir la percepción de espera.
Error → mensaje humano sin códigos técnicos, tranquiliza sobre los datos y ofrece reintentar.
{{ ic.palette }}Sistema de color
Marca
{{ c.name }}
{{ c.hex }}
Semántica
{{ c.tag }}
{{ c.name }}
{{ c.hex }}
{{ ic.type }}Tipografía · Roboto
H1 Backoffice38px · 900
H3 Sección24px · 700
Body · texto de párrafo estándar16px · 400
Caption · metadatos y ayudas13px · 400
2,4 MMétrica · 30px · 900
{{ ic.grid }}Espaciado · base 4px
{{ sp.name }}{{ sp.px }}
{{ ic.grid }}Componentes basefieles a la restricción: Card · Button · Input · badge span · grid
Button · variantes y estados
Input
{{ ic.search }}
{{ ic.alert }}Formato de teléfono no válido
Badge de estado · span condicional
Activo En pruebas Suspendido Pagada Pendiente Vencida
Tabs · botones por estado
ActivaInactiva
Barra de progreso · cuota
Normal62%
Alerta84%
Crítico97%
{{ ic.zap }}Iconografía · lucide-react

Trazo 2px, tamaño 18–24px, heredan currentColor. Estilo lineal por defecto; rellenos solo en indicadores de estado.

{{ g.iconEl }}{{ g.name }}
{{ ic.shield }}Accesibilidad
{{ ic.checkcircle }}
Contraste WCAG AA
Todos los textos sobre badges y alertas ≥ 4,5:1. Los -fg semánticos son versiones oscurecidas del color base.
{{ ic.checkcircle }}
Foco visible por teclado
Halo púrpura de 4px al 15% en inputs críticos (creación de campaña, API keys).
{{ ic.checkcircle }}
No solo color
Los estados combinan color + ícono + texto, nunca color aislado.
{{ toastIcon }}{{ toastMsg }}
{{ ic.alert }}
{{ modalTitle }}

{{ modalBody }}