Frontend CRM (backoffice)
Aplicación web de agentes del CRM de mensajería. Está construida con Angular 18 (basada en NgModules; solo unos pocos componentes del chat son standalone), NgRx para el estado global y Socket.IO para el tiempo real. El paquete se llama backoffice (package.json, angular.json).
:::info Rama documentada
Esta documentación describe la rama feat/meta_connections, que respecto a main habilita el canal Instagram en Conexiones (OAuth de Meta, ajustes y reautorización), añade el estado de mensaje failed (con motivo traducido), enlaces clicables en mensajes y el aviso de expiración del acceso. Ver Conexiones Meta.
:::
Stack
| Tecnología | Versión (package.json) | Uso |
|---|---|---|
Angular (@angular/core) | ^18.2.0 | Framework; módulos NgModule con carga perezosa |
| TypeScript | ~5.5.4 | strict y strictTemplates activados |
NgRx (store, effects, store-devtools) | ^18.0.2 | Estado global (8 slices) |
| RxJS | ~7.8.1 | Servicios reactivos y sockets |
socket.io-client | ^4.8.3 | Tiempo real (namespace /chat) |
@ngx-translate/core | ^15.0.0 | i18n (es, en) |
| Bootstrap | 5.3.3 | Estilos base |
@ng-bootstrap/ng-bootstrap | ^17.0.0 | Modales, dropdowns, tooltips |
@ng-select/ng-select | ^13.0.0 | Selects múltiples |
@swimlane/ngx-datatable | ^20.1.0 | Tablas |
ngx-toastr | ^16.0.1 | Notificaciones |
secure-web-storage + crypto-js | ^1.0.2 / ^4.2.0 | Sesión cifrada en localStorage |
node-forge | ^1.3.1 | Cifrado con clave pública RSA |
| Karma + Jasmine | ~6.4.0 / ~4.3.0 | Tests unitarios |
Mapa de la documentación
| Sección | Contenido |
|---|---|
| Arquitectura | Estructura de carpetas, arranque, módulos core / shared / features |
| Rutas y layouts | Árbol de rutas, módulos lazy, guards por ruta |
| Estado (NgRx) | Slices, acciones y efectos |
| Servicios | Servicios de API y de UI |
| Auth, interceptores y RBAC | Sesión, headers, errores HTTP, permisos |
| Sockets | Eventos de chat, chat interno, WhatsApp |
| Frame / iframe | Modo embebido con postMessage |
| Widget de chat web | Proyecto aparte: widget embebible para sitios de clientes (no es este iframe) |
| i18n y tema | Traducciones, idioma del tenant, tema |
| Compartido | Componentes, directivas, pipes y helpers |
| Features | Un resumen por módulo de negocio, incluido el chat |
| Conexiones Meta | Feature con mayor profundidad: Instagram, WhatsApp, Web, estado failed |
| Librerías | Dependencias de package.json, dónde se usan y cuáles están sin uso |
| Entornos | Claves de environment.* |
| Build y despliegue | Docker, nginx, CI |
| Testing y calidad | Karma, hooks de Git, gitleaks |
Relación con el backend
El frontend consume la API REST bajo environment.apiUrl y el socket bajo environment.socketUrl. Los módulos del backend relacionados con la rama son Meta, Connection, WhatsApp y Message.