Guía de uso
Settings
Settings controls account preferences, dark/light mode, language, guided tours, and operational support catalogs.
Intención de la página
The intent of Settings is to let users tune personal and tenant behavior without editing operational records.
Contexto para soporte
If a preference does not persist, include the setting, browser, and whether the issue happens after refresh or login.
Cómo funciona
Settings 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.
When a setting affects a tenant, users should understand the scope before saving. Personal preferences should feel reversible, while tenant settings may affect other users.
Botones y acciones
| Acción | Qué hace |
|---|---|
Save settings | Persists changed preferences. |
Light theme | Changes the interface to light mode for the current browser. |
Dark theme | Changes 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. |
Save configuration | Stores tenant-level configuration changes. |
Create 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 Settings usa Tour guiado -> Reiniciar tour guiado para limpiar progreso y volver a ver spotlights.
Ejemplo 2: un usuario trabaja mejor con alto contraste. En Settings -> 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 Settings -> 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. Settings 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 Billing, revisa Settings 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 getProfile/updateProfile, 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. |