Navegación General

Esta guía te ayudará a familiarizarte con la estructura y navegación de Suite SelfieTech. Todos los módulos comparten elementos de interfaz similares para una experiencia consistente.

Estructura de la Interfaz

La interfaz de Suite SelfieTech está diseñada siguiendo principios de usabilidad modernos, con una estructura clara y consistente en todos los módulos.

Elementos Principales

Menú Lateral

Navegación principal entre secciones

Barra Superior

Usuario, notificaciones y configuración

Área de Contenido

Contenido principal de cada sección

El menú lateral es el elemento principal de navegación. Se encuentra a la izquierda de la pantalla y permite acceder a todas las secciones del módulo.

Funcionalidades del Menú

  • Secciones agrupadas: Las opciones están organizadas por categorías para facilitar la navegación
  • Indicador activo: La sección actual se muestra resaltada para que siempre sepas dónde estás
  • Submenús: Algunas secciones tienen opciones adicionales que se expanden al hacer clic
  • Iconos visuales: Cada opción tiene un icono representativo para identificación rápida

En Dispositivos Móviles

En pantallas pequeñas, el menú se oculta automáticamente para dar más espacio al contenido:

  1. Toca el icono (hamburguesa) en la esquina superior izquierda
  2. El menú se desplegará sobre el contenido
  3. Selecciona la opción deseada
  4. El menú se cerrará automáticamente o toca fuera del menú para cerrarlo

Barra Superior

La barra superior contiene información y acciones importantes:

Elementos de la Barra

  • Logo/Nombre del módulo: Identifica en qué módulo te encuentras
  • Búsqueda: Campo para buscar dentro del módulo (si está disponible)
  • Notificaciones: Icono de campana que muestra alertas pendientes
  • Usuario: Tu nombre y foto de perfil con acceso a opciones de cuenta

Menú de Usuario

Al hacer clic en tu nombre o foto de perfil, aparece un menú con opciones:

  • Mi Perfil: Ver y editar tu información personal
  • Configuración: Preferencias de la cuenta
  • Tema: Cambiar entre modo claro/oscuro (si disponible)
  • Cerrar Sesión: Salir del sistema de forma segura

Trabajando con Tablas

Gran parte de la información se muestra en tablas. Aquí te explicamos cómo utilizarlas:

Búsqueda y Filtros

  • Buscador general: Escribe cualquier texto para filtrar los resultados
  • Filtros por columna: Algunos campos tienen filtros específicos (fechas, estados, etc.)
  • Filtros avanzados: Botón para acceder a opciones de filtrado más específicas

Ordenamiento

Haz clic en el encabezado de cualquier columna para ordenar:

  • Un clic: Orden ascendente (A-Z, menor a mayor)
  • Segundo clic: Orden descendente (Z-A, mayor a menor)
  • Tercer clic: Vuelve al orden original

Paginación

Las tablas grandes se dividen en páginas:

  • Usa los botones de navegación para moverte entre páginas
  • Puedes cambiar cuántos registros se muestran por página
  • Se muestra el total de registros encontrados

Acciones en Filas

Cada fila puede tener iconos de acción:

  • Ver: Ver detalles del registro
  • Editar: Modificar información
  • Eliminar: Borrar el registro
  • Más opciones: Menú con acciones adicionales

Formularios

Los formularios se utilizan para ingresar o modificar información:

Campos Obligatorios

Los campos marcados con asterisco (*) son obligatorios y deben completarse para guardar el formulario.

Validación

  • Los campos con error se muestran con borde rojo
  • Un mensaje debajo del campo indica qué está mal
  • Corrige los errores antes de intentar guardar

Botones de Acción

  • Guardar: Guarda los cambios y permanece en la página
  • Guardar y Salir: Guarda y vuelve a la lista
  • Cancelar: Descarta los cambios sin guardar

Importante: Si navegas fuera de un formulario sin guardar, perderás los cambios. El sistema puede mostrarte una advertencia antes de salir.

Ventanas Modales

Las ventanas modales son cuadros de diálogo que aparecen sobre el contenido principal:

  • Se utilizan para confirmaciones, formularios rápidos o mostrar detalles
  • Ciérralas con el botón X o haciendo clic fuera del modal
  • También puedes presionar la tecla Esc

Notificaciones y Alertas

El sistema muestra diferentes tipos de mensajes:

Éxito: La operación se completó correctamente
Información: Mensaje informativo sobre el sistema
Advertencia: Algo requiere tu atención
Error: Algo salió mal, revisa los detalles

Atajos de Teclado

Algunos atajos útiles disponibles en el sistema:

Atajo Acción
Ctrl + S Guardar formulario (cuando está disponible)
Esc Cerrar ventana modal / cancelar acción
Enter Confirmar acción / enviar formulario
Tab Navegar al siguiente campo del formulario
Shift + Tab Navegar al campo anterior del formulario