Guía de uso
Configuración
Configuración controls account preferences, dark/light mode, language, guided tours, and operational support catalogs.
Intención de la página
La intención de Configuración es mantener preferencias de tenant, operación, seguridad y comportamiento general en un lugar controlado.
Contexto para soporte
Si una preferencia no persiste, incluye la configuración afectada, navegador y si ocurre después de refrescar o iniciar sesión.
Cómo funciona
Configuración groups preferences that affect how the app behaves for a user or tenant. It is separate from workflow pages so daily work is not interrupted by configuration details.
Theme controls how the interface is displayed. Light mode, dark mode, and system mode are personal viewing preferences, so the user can choose the versión that is easier to read without changing orders, inventory, billing, or reports.
Language controls the interface copy through i18n. Switching between Spanish and English changes labels, buttons, hints, validation messages, and navigation text so a team can work in the language that makes the operation clearest.
Guided-tour and support preferences help teams onboard users consistently. Saving those settings should make future sessions clearer and reduce repeated explanations.
Cuando una configuración afecta a un tenant, los usuarios deben entender el alcance antes de guardar. Las preferencias personales deben sentirse reversibles, mientras que la configuración del tenant puede afectar a otros usuarios.
Botones y acciones
| Acción | Qué hace |
|---|---|
Guardar settings | Persists changed preferences. |
Light theme | Cambiars the interface to light mode for the current browser. |
Dark theme | Cambiars the interface to dark mode for the current browser. |
System theme | Uses the operating system preference and updates when that preference changes. |
Language | Switches the interface between Spanish and English. |
Reset tour | Restarts contextual guidance when a user needs onboarding again. |
Guardar configuration | Stores tenant-level configuration changes. |
Crear ticket | Abre una solicitud de soporte con esta página ya adjunta como contexto. |
Ejemplos operativos
Ejemplo 1: una persona quiere repetir el tour guiado. En Configuración usa Tour guiado -> Reiniciar tour guiado para limpiar progreso y volver a ver spotlights.
Ejemplo 2: un usuario trabaja mejor con alto contraste. En Configuración -> Tour guiado cambia Theme a dark mode; si prefiere pantalla clara para revisión diurna, selecciona light mode. System usa la preferencia del sistema operativo.
Ejemplo 3: un equipo mixto necesita operar en español e inglés. En Configuración -> Tour guiado usa Language para cambiar ES/EN; la navegación, botones, tooltips, validaciones y textos principales deben actualizarse sin cerrar sesión.
Ejemplo 4: administracion cambia ambiente FE de staging a production. Configuración muestra ambiente activo y guarda perfil canonico del tenant, por eso debe usarse con cuidado.
Ejemplo 5: si una caja, tipo de documento o condición de venta no aparece en Facturación, revisa Configuración antes de reportarlo como fallo de factura.
Ejemplo 6: si tema o idioma no persisten después de refrescar, reporta navegador, usuario, tenant, tema elegido, idioma elegido y si estabas en modo normal o incognito.
Cómo se lee en el código
| Archivo | Qué hace |
|---|---|
frontend/src/pages/settings/settings.desktop.tsx | SettingsDesktop monta SettingsWorkbenchPanel con contextualHintPageId="settings". |
frontend/src/modules/settings/components/settings-workbench-panel.tsx | El panel maneja getPerfil/updatePerfil, tema, idioma, tour guiado, ventana de sesión, perfil FE del tenant, tipos de documento, cajas, condiciones y monedas. |
frontend/src/components/ui/theme-toggle.tsx | ThemeToggle muestra light, dark y system. Cada botón llama setTheme y expone labels accesibles traducidos desde common.themeOptions. |
frontend/src/app/theme-provider.tsx | ThemeProvider guarda la preferencia en localStorage con la llave app-theme, resuelve system contra prefers-color-scheme y marca html.dark/data-theme. |
frontend/src/components/ui/language-toggle.tsx | LanguageToggle alterna entre es y en con i18n.changeLanguage y usa tooltips para explicar la acción. |
frontend/src/i18n/index.ts | i18n carga common.json de es/en, detecta localStorage, navegador y htmlTag, guarda idioma en localStorage y usa español como fallback. |
frontend/src/lib/demo/guided-demo.ts | Las funciones resetGuidedDemoProgress, readGuidedDemoCompletedPages y syncGuidedDemoCompletedPages sostienen el botón de reiniciar tours. |