> ## Documentation Index > Fetch the complete documentation index at: https://wiki.vivla.com/llms.txt > Use this file to discover all available pages before exploring further. # Panel de soporte > Interfaz del panel de soporte y hub de operaciones para agentes y administradores # Panel de soporte El panel de soporte es la interfaz principal del módulo de Chat en el frontend (`/app/chat/`). Funciona como hub central de operaciones, integrando chat, tickets, encuestas, usuarios, propiedades y analytics. ## Sidebar principal (8 items) La navegación lateral organiza las herramientas por frecuencia de uso diario: | # | ID | Label | Icono | Ruta | | - | ---------- | ------------- | ------------- | ---------------------- | | 1 | chats | Chats | MessageSquare | `/app/chat` | | 2 | tickets | Tickets | Ticket | `/app/chat/tickets` | | 3 | users | Usuarios | Users | `/app/chat/users` | | 4 | properties | Propiedades | Building2 | `/app/chat/properties` | | 5 | surveys | Encuestas | ClipboardList | `/app/chat/surveys` | | 6 | analytics | Analítica | BarChart3 | `/app/chat/analytics` | | 7 | news | Novedades | Megaphone | `/app/chat/news` | | 8 | settings | Configuración | Settings | `/app/chat/settings` | Usuarios y Propiedades están promovidos desde Settings al sidebar principal para facilitar flujos diarios de soporte (buscar casa → copiar enlace encuesta → enviar por chat). ## Vistas principales ### Lista de canales Ruta: `/app/chat/` Panel lateral redimensionable (320px por defecto, rango 240-600px) que muestra la lista de canales con: * **Scroll virtualizado** con paginación infinita (50 canales por página) * **Filtros**: por propiedad, agente, tipo de canal * **Búsqueda** de mensajes a través de canales * **Conteo de no leídos** en tiempo real por canal * **Marcar como no leído**: menú contextual (kebab, visible al pasar el cursor) en cada canal que lo devuelve al estado no leído (badge = 1), persistente tras refrescar y solo para la agente que lo marca. Usa `markUnread` nativo de Stream vía `PATCH /chat/channels/:channelId/mark-unread`. Solo disponible para agentes con identidad de chat propia (no para viewers, que comparten la identidad `vivla-admin`). * **Pestañas** para diferentes vistas de canales * **Asistente de creación** de canales (wizard multi-paso) ### Conversación Ruta: `/app/chat/$channelId` Vista principal de la conversación con: * **Lista de mensajes** con scroll virtualizado * **Búsqueda en conversación** con navegación entre resultados * **Sidebar de respuestas rápidas** (quick replies) * **Modo de selección de mensajes** para crear tickets o agregar a tickets existentes * **Sidebar lateral** con metadata del canal (propiedad, booking, información del huésped) * En canales asociados a una propiedad o reserva se muestra esa casa con el desplegable **Información de la casa** (WiFi, acceso, alarma, parking). * En canales sin propiedad propia (novedades, feedback, incidencias), si el usuario principal tiene casas se listan todas bajo **Propiedades de *nombre***, cada una con su mismo desplegable de información, para conservar contexto en cualquier canal. * **Seguimiento de estado de lectura**, con acción **Marcar como no leído** en la cabecera (junto a Archivar): deselecciona el canal para que `stream-chat-react` no lo vuelva a marcar leído y el badge reaparezca en la lista. * **Salto a mensaje** (jump-to-message) ### Tickets Ruta: `/app/chat/tickets/` Panel de administración de tickets con: * Filtros por estado, prioridad, propiedad y agente * Paginación (100 tickets por página) * Búsqueda rápida por ID o título * Badges de prioridad y estado * Vista detallada por ticket (`/app/chat/tickets/$ticketId`) con comentarios ## Usuarios Ruta: `/app/chat/users/` Vista de usuarios promovida desde Settings al sidebar principal. Incluye lista de usuarios con vista detallada por usuario (`/app/chat/users/$userId`). ## Propiedades Ruta: `/app/chat/properties/` Vista de propiedades promovida desde Settings al sidebar principal. Muestra un grid de tarjetas con imagen de portada, nombre, ubicación, selector de agente asignado y botón "Ver NPS" que navega a `/app/chat/surveys/results?property={id}`. Soporta modo batch para asignaciones masivas. ## Encuestas Ruta: `/app/chat/surveys/` Hub de encuestas integrado en el panel de soporte. Incluye 5 sub-secciones con navegación propia: | # | ID | Label | Icono | Ruta | Exact | | - | ------------ | ---------------- | --------- | -------------------------------- | ----- | | 1 | activity | Actividad | Activity | `/app/chat/surveys` | true | | 2 | admin | Administrar | PenTool | `/app/chat/surveys/admin` | false | | 3 | results | Resultados | BarChart3 | `/app/chat/surveys/results` | false | | 4 | action-plans | Planes de Acción | FileCheck | `/app/chat/surveys/action-plans` | false | | 5 | rewards | Rewards | Trophy | `/app/chat/surveys/rewards` | false | **`/app/chat/surveys`** Tabla de respuestas con filtros (búsqueda, tipo encuesta, destino, rango de fechas con DateRangePicker), quick actions (generador inline de deep links, resumen de rewards) y exportación CSV. **`/app/chat/surveys/admin`** Tipos de encuesta agrupados por scope (Casa / Reserva) en layout de 2 columnas. Cada tipo muestra sus versiones con acciones: publicar, duplicar, editar. El builder (`/app/chat/surveys/admin/$surveyTypeId/edit/$surveyId`) permite crear y editar encuestas con 5 tipos de pregunta, condicionales múltiples, i18n (ES/EN) y preview en vivo. **`/app/chat/surveys/results`** Grid de 2 columnas con una tarjeta por tipo de encuesta. Incluye DateRangePicker (default 30 días), filtro por propiedad, resultados agregados del Home Review (responses, promedio, peor espacio, ratings por espacio, últimas 10 respuestas) y vista legacy de resultados desde Firestore. **`/app/chat/surveys/action-plans`** Lista de planes de acción con vista de detalle: stats grid, action items, y botones de aprobar/enviar. Los planes se generan automáticamente por consenso (75% participación + 75% acuerdo). **`/app/chat/surveys/rewards`** Gráfico de barras de usuarios por nivel de reward (1-5) y configuración del premio de nivel 5. ## Configuración (Settings) Todas las rutas bajo `/app/chat/settings/`. Reducido a 4 secciones (Usuarios y Propiedades promovidos al sidebar principal): **`/app/chat/settings/agents`** Gestión de agentes de soporte: crear, editar, quitar y asignar a canales. * **Crear / convertir**: el modal permite crear un agente nuevo (con invitación por email) o convertir a un usuario existente. El buscador del picker consulta todos los usuarios por nombre o email (con debounce), sin filtrar por tipo, de modo que también aparece el personal de Vivla que solo tiene usuario `client` (creado por el login de la app). Las opciones de tipo `client` se marcan con un badge **Cliente**. Solo se ofrecen los roles **Moderador** y **Administrador**: el rol `viewer` se retiró de esta superficie porque el `CHECK` de la tabla `users` solo admite `admin/moderator/user` y guardarlo fallaba. * **Quitar agente**: baja el rol de la persona a `user`, así deja de ser asignable a canales y tickets y pierde los permisos de agente CX. **Conserva su usuario y su historial de chat** (no se borra el usuario en Stream ni Auth0) y se le puede volver a convertir en agente más adelante. No puedes quitarte a ti mismo, ni quitar al último administrador de chat. El diálogo incluye **"Quitar también de todos los canales"** (activado por defecto): al confirmarlo se le saca como moderador de todos los canales no archivados que atendía (`DELETE /chat/users/agents/:id?removeFromChannels=true`). Los canales donde es el **agente activo o por defecto** se respetan y se listan en el aviso: reasígnalos primero y vuelve a quitarlo. El toast de éxito informa de cuántos canales se limpiaron y cuántos se saltaron. **`/app/chat/settings/channels`** Tres pestañas: * **Todos los canales**: búsqueda, filtros (tipo/agente/propiedad/ubicación), operaciones batch (cambiar agente activo/default, agregar moderadores, eliminar) * **Bookings**: gestión de reservas con vista de calendario * **Tipos**: (solo admin) crear y editar tipos de canal **`/app/chat/settings/shifts`** Programación de turnos de agentes de soporte. **`/app/chat/settings/sync`** (solo admin) Visualización de jobs de sincronización, logs y trigger manual. ## News (Notificaciones embebidas) Sección de broadcast y notificaciones integrada en el módulo de chat, bajo `/app/chat/news/`: | Ruta | Descripción | | ---------------------------- | ------------------------------ | | `/app/chat/news/` | Hub principal de noticias | | `/app/chat/news/dashboard` | Dashboard de analytics | | `/app/chat/news/templates` | Templates de mensajes | | `/app/chat/news/send` | Envío manual de notificaciones | | `/app/chat/news/history` | Historial de mensajes enviados | | `/app/chat/news/deep-links` | Configuración de deep links | | `/app/chat/news/automations` | Reglas de automatización | | `/app/chat/news/settings` | Configuración general de news | ## Analytics Ruta: `/app/chat/analytics` Métricas de uso del chat: actividad por canal, por usuario y estadísticas generales. El acceso a las secciones está controlado por el sistema de permisos. Los agentes con rol `editor` en `tool-chat` pueden gestionar canales, tickets y encuestas. Las operaciones de configuración avanzada (tipos de canal, sync) requieren rol `admin`.