Appearance
GUION Y ESPECIFICACIÓN: TOUR DIDÁCTICO DE BIENVENIDA (ONBOARDING)
ITECEL ADM — Deuda Técnica 10.1Estado del documento: Propuesta consolidada con cambios del operador (14 tarjetas)
1. Alcance y Audiencia
- Audiencia Destino:
- Administradores regulares con licencia completa: SÍ.
- Usuarios administradores con licencia demo: SÍ (mismos módulos y navegación, con mención clara a su cupo de cortesía de 10 correos).
- Residentes y miembros de comités: NO (Alcance excluido; su propio tour está formalizado en
D-NUEVA-1). - Superadministradores: NUNCA (Consola de control global y gestión de licencias; excluidos del flujo de condominio).
2. Fichas del Recorrido Confirmadas (Fase 0.1)
Ficha 1: Apertura y Bienvenida al Administrador
- Módulo / Ruta: Overlay global al iniciar sesión (
currentView: 'app'). - Archivo de Entrada:
src/components/onboarding/WelcomeTourModal.tsx(a crear). - Ícono sugerido:
Sparkles - Contenido confirmado:
"¡Te damos la bienvenida a ITECEL ADM! Tu plataforma integral para administrar tu condominio con transparencia y control; claridad, orden y respaldo contable profesional. Te guiaremos en un breve recorrido para conocer tus herramientas principales." - Sugerencia: EN EL TOUR (Tarjeta 1: Apertura obligatoria).
Ficha 2: Resumen del Condominio (Dashboard)
- Módulo / Ruta:
'adminDashboard' - Archivo de Entrada:
src/components/AdminDashboardView.tsx - Ícono sugerido:
LayoutDashboard - Propuesta de contenido:
"Tu centro de control operativo. Funciona como un tablero con accesos directos e interactivos a cada sección del sistema, complementado con indicadores rápidos de inmuebles, presupuesto, balance bancario y egresos acumulados que te llevan a su detalle con un solo clic." - Sugerencia: EN EL TOUR (Tarjeta 2: Pantalla de inicio y lanzadera principal).
Ficha 3: Directorio de Unidades y Residentes
- Módulo / Ruta:
'directory' - Archivo de Entrada:
src/components/DirectoryTable.tsx - Ícono sugerido:
Users - Contenido confirmado:
"Registra viviendas, departamentos, casas, locales, establece datos de contacto de propietarios y/o inquilinos, determina porcentajes de alícuota y registra correos electrónicos a los que luego podrás enviar invitaciones para que cada residente ingrese a la plataforma, o incluso estados de cuenta." - Variante Demo:
"En cuentas demo dispones de una cuota de prueba de 10 correos para enviar invitaciones digitales de acceso." - Sugerencia: EN EL TOUR (Tarjeta 3: Base de datos comunitaria).
Ficha 4: Presupuesto Anual y Fondo de Reserva
- Módulo / Ruta:
'budget' - Archivo de Entrada:
src/components/BudgetView.tsx - Ícono sugerido:
PiggyBank - Contenido confirmado:
"Establece tu ecosistema contable. Mediante partidas presupuestarias, planifica los ingresos y gastos proyectados para el año, ordinarios o extraordinarios y monitorea la ejecución presupuestaria en tiempo real para evitar desviaciones financieras." - Sugerencia: EN EL TOUR (Tarjeta 4: Planificación financiera).
Ficha 5: Emisión de Expensas y Alícuotas
- Módulo / Ruta:
'generateDebts' - Archivo de Entrada:
src/components/debts/GenerateDebtsMainView.tsx - Ícono sugerido:
Receipt - Contenido confirmado:
"Emite las cuotas mensuales de forma detallada y rápida, ya sea según el coeficiente de alícuota o por valores fijos. Utiliza la plantilla para generar adeudos recurrentes masivos. Los adeudos quedan registrados inmediatamente en las cuentas de cada vivienda." - Sugerencia: EN EL TOUR (Tarjeta 5: Facturación de cuotas).
Ficha 6: Cobranzas y Registro de Pagos
- Módulo / Ruta:
'payments' - Archivo de Entrada:
src/components/payments/CapturePaymentsMainView.tsx - Ícono sugerido:
CreditCard/HandCoins - Contenido confirmado:
"Registra transferencias, depósitos o pagos recibidos de los residentes. Concilia comprobantes rápidamente y mantén los saldos al día sin descuadres ni retrasos." - Sugerencia: EN EL TOUR (Tarjeta 6: Registro de ingresos y conciliación).
Ficha 7: Control y Registro de Egresos
- Módulo / Ruta:
'expenses' - Archivo de Entrada:
src/components/expenses/CaptureExpenseMainView.tsx - Ícono sugerido:
DollarSign/TrendingDown - Contenido confirmado:
"Registra cada desembolso clasificándolo por su partida presupuestaria, asociándolo al proveedor correspondiente y manteniendo un respaldo digital de egresos." - Sugerencia: EN EL TOUR (Tarjeta 7: Trazabilidad del gasto).
Ficha 8: Estados de Cuenta y Liquidaciones
- Módulo / Ruta:
'accountStatement' - Archivo de Entrada:
src/components/statements/AccountStatementFullView.tsx - Ícono sugerido:
FileText - Contenido confirmado:
"Revisa el historial detallado de cargos y pagos de cualquier vivienda, descarga estados de cuenta en PDF o envíalos por correo electrónico." - Variante Demo:
"En cuentas demo dispones de una cuota de prueba de 10 envíos de correo para experimentar el despacho digital de estados de cuenta e invitaciones." - Sugerencia: EN EL TOUR (Tarjeta 8: Consulta de estados de cuenta y saldos).
Ficha 9: Cuentas Bancarias
- Módulo / Ruta:
'bankAccounts' - Archivo de Entrada:
src/components/BankAccountsView.tsx - Ícono sugerido:
Building2/Landmark - Contenido confirmado:
"Administra las cuentas bancarias receptoras y fondos del condominio. Cada pago cobrado o gasto cancelado impacta automáticamente en el saldo de la cuenta elegida y puedes revisar sus estados de cuenta." - Sugerencia: EN EL TOUR (Tarjeta 9: Tesorería y bancos).
Ficha 10: Informes Financieros y Auditoría
- Módulo / Ruta:
'financials' - Archivo de Entrada:
src/components/FinancialsPreview.tsx - Ícono sugerido:
PieChart - Contenido confirmado:
"Genera reportes de balances, flujo de caja, ejecución presupuestaria y listados de morosidad listos para imprimir o exportar, ideales para asambleas y auditorías con total transparencia." - Sugerencia: EN EL TOUR (Tarjeta 10: Rendición de cuentas formal).
Ficha 11: Cartelera Virtual & Documentos (Módulo Integrado por el Operador)
- Módulo / Ruta: Acceso directo en navbar (
#navbar-quick-communications-btn). Sin cambiar de vista obligatoriamente, resaltando el botón superior. - Archivo de Entrada:
src/components/communications/CommunicationsMainView.tsx - Ícono sugerido:
Megaphone - Contenido confirmado:
"Desde aquí puedes acceder al panel de Comunicaciones. Mantén a toda la comunidad informada. Publica avisos y comunicados oficiales en formato de posts dinámicos, y sube reglamentos, actas de asamblea o circulares al repositorio digital para que estén al alcance de todos los residentes." - Sugerencia: EN EL TOUR (Tarjeta 11: Comunicación comunitaria y repositorio de actas).
Ficha 12: Configuración del Condominio y Licencia
- Módulo / Ruta:
'settings' - Archivo de Entrada:
src/components/SettingsView.tsx - Ícono sugerido:
Settings - Contenido confirmado:
"Personaliza los datos legales de tu condominio, logotipo, instrucciones de pago y revisa el estado de tu licencia. Además, desde aquí podrás repetir este tour interactivo cuando lo necesites." - Sugerencia: EN EL TOUR (Tarjeta 12: Identidad y personalización).
Ficha 13: Herramientas Operativas Rápidas (Módulo Integrado por el Operador)
- Módulo / Ruta: Bloque de Herramientas Administrativas en
'settings'(#section-admin-tools). - Archivo de Entrada:
src/components/SettingsView.tsx(desplazando la vista con scroll suave hacia el contenedor de herramientas). - Ícono sugerido:
Send/Briefcase - Contenido confirmado:
"Accede a herramientas operativas clave para tu gestión: el envío masivo de invitaciones para que los residentes activen su cuenta en el portal, y la cobranza masiva para despachar todos los estados de cuenta por correo electrónico en un par de clics." - Variante Demo:
"En cuentas demo dispones de una cuota de prueba de 10 correos unificados para invitaciones y cobranza masiva." - Sugerencia: EN EL TOUR (Tarjeta 13: Destacado visual de Invitaciones y Cobranza Masiva antes del cierre).
Ficha 14: Cierre y Orientación General
- Módulo / Ruta: Overlay global en vista principal (
currentView: 'app'). Al finalizar o cerrar, retorna automáticamente aadminDashboard. - Archivo de Entrada:
src/components/onboarding/WelcomeTourModal.tsx(a crear). - Ícono sugerido:
CheckCircle2 - Contenido confirmado:
"¡Todo listo para comenzar a gestionar tu condominio! Te sugerimos comenzar registrando tus unidades de vivienda en el Directorio, estableciendo el presupuesto y emitiendo tus primeras alícuotas. Si deseas repasar este recorrido, encontrarás el botón en el menú de Configuración." - Sugerencia: EN EL TOUR (Tarjeta 14: Cierre final y llamada a la acción).
3. Tabla Maestra de Guion Propuesto (14 Tarjetas)
| # | Módulo / Ubicación | Título de Tarjeta | Ícono | Texto para el Cliente | Variante Cuenta Demo |
|---|---|---|---|---|---|
| 1 | Inicio / Overlay | ¡Bienvenido a ITECEL ADM! | Sparkles | ¡Te damos la bienvenida a ITECEL ADM! Tu plataforma integral para administrar tu condominio con transparencia y control; claridad, orden y respaldo contable profesional. Te guiaremos en un breve recorrido para conocer tus herramientas principales. | — |
| 2 | adminDashboard | Centro de Control y Accesos Rápidos | LayoutDashboard | Tu centro de control operativo. Funciona como un tablero con accesos directos e interactivos a cada sección del sistema, complementado con indicadores rápidos de inmuebles, presupuesto, balance bancario y egresos acumulados que te llevan a su detalle con un solo clic. | — |
| 3 | directory | Directorio de Unidades y Residentes | Users | Registra viviendas, departamentos, casas, locales, establece datos de contacto de propietarios y/o inquilinos, determina porcentajes de alícuota y registra correos electrónicos a los que luego podrás enviar invitaciones para que cada residente ingrese a la plataforma, o incluso estados de cuenta. | En cuentas demo dispones de una cuota de prueba de 10 correos para invitaciones digitales. |
| 4 | budget | Presupuesto Anual y Fondos | PiggyBank | Establece tu ecosistema contable. Mediante partidas presupuestarias, planifica los ingresos y gastos proyectados para el año, ordinarios o extraordinarios y monitorea la ejecución presupuestaria en tiempo real para evitar desviaciones financieras. | — |
| 5 | generateDebts | Emisión de Expensas y Alícuotas | Receipt | Emite las cuotas mensuales de forma detallada y rápida, ya sea según el coeficiente de alícuota o por valores fijos. Utiliza la plantilla para generar adeudos recurrentes masivos. Los adeudos quedan registrados inmediatamente en las cuentas de cada vivienda. | — |
| 6 | payments | Cobranzas y Registro de Pagos | HandCoins | Registra transferencias, depósitos o pagos recibidos de los residentes. Concilia comprobantes rápidamente y mantén los saldos al día sin descuadres ni retrasos. | — |
| 7 | expenses | Control y Registro de Egresos | TrendingDown | Registra cada desembolso clasificándolo por su partida presupuestaria, asociándolo al proveedor correspondiente y manteniendo un respaldo digital de egresos. | — |
| 8 | accountStatement | Estados de Cuenta y Liquidaciones | FileText | Revisa el historial detallado de cargos y pagos de cualquier vivienda, descarga estados de cuenta en PDF o envíalos por correo electrónico. | En cuentas demo dispones de una cuota de prueba de 10 correos para experimentar el despacho digital. |
| 9 | bankAccounts | Cuentas Bancarias | Building2 | Administra las cuentas bancarias receptoras y fondos del condominio. Cada pago cobrado o gasto cancelado impacta automáticamente en el saldo de la cuenta elegida y puedes revisar sus estados de cuenta. | — |
| 10 | financials | Informes Financieros y Auditoría | PieChart | Genera reportes de balances, flujo de caja, ejecución presupuestaria y listados de morosidad listos para imprimir o exportar, ideales para asambleas y auditorías con total transparencia. | — |
| 11 | communications | Cartelera Virtual & Documentos | Megaphone | Desde aquí puedes acceder al panel de Comunicaciones. Mantén a toda la comunidad informada. Publica avisos y comunicados oficiales en formato de posts dinámicos, y sube reglamentos, actas de asamblea o circulares al repositorio digital para que estén al alcance de todos los residentes. | — |
| 12 | settings | Configuración & Licencia | Settings | Personaliza los datos legales de tu condominio, logotipo, instrucciones de pago y revisa el estado de tu licencia. Además, desde aquí podrás repetir este tour interactivo cuando lo necesites. | — |
| 13 | Herramientas Operativas | Herramientas Operativas Rápidas | Send | Accede a herramientas operativas clave para tu gestión: el envío masivo de invitaciones para que los residentes activen su cuenta en el portal, y la cobranza masiva para despachar todos los estados de cuenta por correo electrónico en un par de clics. | En cuentas demo dispones de una cuota de prueba de 10 correos unificados. |
| 14 | Cierre / Overlay | ¡Todo listo para comenzar! | CheckCircle2 | ¡Todo listo para comenzar a gestionar tu condominio! Te sugerimos comenzar registrando tus unidades de vivienda en el Directorio, estableciendo el presupuesto y emitiendo tus primeras alícuotas. Si deseas repasar este recorrido, encontrarás el botón en el menú de Configuración. | — |
4. Deuda Técnica Registrada Adicionalmente
En docs/TECHNICAL_DEBT.md (Sección 10) se encuentran registradas formalmente:
- D-NUEVA-1: Tour didáctico propio para Residentes (diferenciado del de administradores).
- D-NUEVA-2: Botón (i) informativo contextual y Guía/README por módulo (CODEWIKI).
- D-NUEVA-3: Difusión multicanal y exportación gráfica de posts en Cartelera (envío selectivo/masivo por correo y descarga en JPG/PDF para difusión en WhatsApp o impresión).
- D-NUEVA-4: Gobernanza de Storage en Cuentas Demo (límite estricto de 3 documentos subidos en posts para licenciamiento de prueba).