Documentación del Sistema

Appearance

Sidebar - Ordenamiento Alfabético y Búsqueda ​

Módulo: Core / Layout Tipo: UI Component Estado: Implementado Fecha: 2026-01-14

Descripción ​

Mejoras al componente Sidebar del core que agregan dos funcionalidades clave para mejorar la navegación y usabilidad: ordenamiento alfabético automático de items del menú y búsqueda/filtrado en tiempo real.

Estas mejoras aplican a todos los módulos del sistema que utilizan el sidebar estándar (CRM, Contabilidad, Ventas, Stock, Tesorería, Compras, etc.).

Frontend ​

Componente Modificado ​

Ubicación: ts/core/components/layout/Sidebar.tsx

Feature 1: Ordenamiento Alfabético ​

Descripción: Los items dentro de cada sección del sidebar se ordenan alfabéticamente de manera automática.

Características:

  • Ordenamiento recursivo: Aplica a items anidados (children)
  • Preserva estructura lógica: Las secciones principales (Bases, Movimientos, Informes, Utilidades) mantienen su orden original
  • Sensible al español: Usa localeCompare('es') para ordenamiento correcto con acentos y ñ
  • Automático: No requiere configuración adicional en cada módulo

Comportamiento:

Antes:
Bases
  ├── Provincias
  ├── Concesionarios
  ├── Localidades
  └── Clasificación

Después:
Bases
  ├── Clasificación
  ├── Concesionarios
  ├── Localidades
  └── Provincias

Función implementada: sortMenuItems()

  • Mapea items y ordena children alfabéticamente
  • Aplica recursivamente para subitems
  • No modifica el orden de secciones padre

Feature 2: Búsqueda y Filtrado ​

Descripción: Input de búsqueda en el sidebar que filtra items del menú en tiempo real.

Características:

  • Ubicación: Arriba del menú, después del panel de usuario
  • Búsqueda case-insensitive: No distingue mayúsculas/minúsculas
  • Búsqueda recursiva: Busca en items anidados
  • Propagación de resultados: Si un item hijo coincide, el padre también se muestra
  • Auto-expansión: Secciones con resultados se expanden automáticamente
  • Limpiar rápido: Botón "X" para limpiar la búsqueda

Componente UI:

  • Material-UI TextField: Consistente con el resto de la aplicación
  • Ícono de búsqueda: Al inicio del input
  • Botón clear: Al final cuando hay texto
  • Placeholder: "Buscar en el menú..."
  • Estilo adaptado: Tema oscuro coherente con AdminLTE sidebar

Función implementada: filterMenuItemsBySearch()

  • Filtra items por término de búsqueda
  • Retorna todos los items si el término está vacío
  • Preserva padres si hijos coinciden
  • Filtra recursivamente

Flujo de Procesamiento ​

menuItems (props)
    ↓
filterMenuItems() → Filtra por permisos
    ↓
sortMenuItems() → Ordena alfabéticamente (solo children)
    ↓
filterMenuItemsBySearch() → Filtra por término de búsqueda
    ↓
Renderizado con auto-expand si hay búsqueda

Interacciones del Usuario ​

  1. Visualización inicial: Usuario ve el menú ordenado alfabéticamente
  2. Búsqueda:
    • Usuario escribe en el input (ej: "contacto")
    • Solo aparecen items relacionados con "contacto"
    • Secciones que contienen resultados se expanden automáticamente
  3. Limpiar búsqueda:
    • Click en botón X
    • Borrar todo el texto manualmente
    • Todas las opciones vuelven a mostrarse

Permisos ​

No requiere permisos adicionales. El componente respeta los permisos existentes de cada item del menú (MenuItem.permission y MenuItem.configKey).

Backend ​

No aplica. Esta es una mejora exclusivamente de frontend que no requiere cambios en el backend.

Casos de Uso ​

UC-001: Buscar Opción Específica ​

Actor: Usuario con acceso a múltiples módulos

Flujo:

  1. Usuario ingresa al módulo CRM
  2. El sidebar muestra todas las opciones ordenadas
  3. Usuario escribe "contacto" en el input de búsqueda
  4. Solo aparecen items relacionados:
    • Bases > Contactos
    • Bases > Tipo de Contactos
    • Movimientos > CRM Ventas (si tiene subitem con "contacto")
  5. Usuario hace click en "Contactos"
  6. Navega a la vista correspondiente

Resultado: Navegación rápida sin necesidad de expandir secciones manualmente.

UC-002: Navegar por Opciones Ordenadas ​

Actor: Cualquier usuario del sistema

Flujo:

  1. Usuario ingresa a cualquier módulo
  2. Expande sección "Bases"
  3. Ve todos los items ordenados alfabéticamente:
    • Clasificación
    • Concesionarios/Proveedores
    • Contactos
    • Estados
    • Localidades
    • Medios de Pago
    • Modelos
    • Motivo de Cierre
    • Motivo de Llamada
    • Prioridades
    • Provincias
    • Tipo de Contactos
    • Tipo de Origen
  4. Encuentra rápidamente la opción que busca

Resultado: Navegación intuitiva y predecible.

UC-003: Limpiar Búsqueda ​

Actor: Usuario que realizó una búsqueda

Flujo:

  1. Usuario escribe "provincia" en búsqueda
  2. Ve solo resultados filtrados
  3. Hace click en botón X (o borra todo el texto)
  4. Todas las opciones del menú vuelven a aparecer

Resultado: Retorno rápido a vista completa del menú.

Consideraciones Técnicas ​

Compatibilidad ​

  • AdminLTE Treeview: Compatible con el widget de expansión/colapso
  • React Router: Compatible con navegación existente
  • Permisos: Respeta el sistema de permisos actual
  • Multi-tenancy: No afecta la funcionalidad multi-tenant

Performance ​

  • Ordenamiento: O(n log n) por sección, ejecutado una vez al montar
  • Búsqueda: O(n) sobre items filtrados por permisos
  • Re-renders: Optimizado con useState para solo re-renderizar en cambios de búsqueda
  • Memoización: No necesaria para menús de 20-50 items típicos

Escalabilidad ​

Para menús con 100+ items (poco común), se podría considerar:

  • Debounce en el input de búsqueda (300ms)
  • Memoización con useMemo para ordenamiento

Accesibilidad ​

  • Input de búsqueda accesible con teclado
  • Placeholder descriptivo
  • Botón clear con tooltip

Pruebas de Aceptación ​

PA-001: Ordenamiento Alfabético ​

  • [ ] Items dentro de "Bases" están ordenados alfabéticamente
  • [ ] Items dentro de "Movimientos" están ordenados alfabéticamente
  • [ ] Items dentro de "Informes" están ordenados alfabéticamente
  • [ ] Secciones principales mantienen su orden (Home → Bases → Movimientos → Informes → Utilidades → Logout)
  • [ ] Items anidados (si existen) también están ordenados

PA-002: Búsqueda Básica ​

  • [ ] Input de búsqueda visible arriba del menú
  • [ ] Escribir texto filtra items en tiempo real
  • [ ] Búsqueda no distingue mayúsculas/minúsculas
  • [ ] Items que no coinciden se ocultan
  • [ ] Botón X aparece cuando hay texto

PA-003: Búsqueda Recursiva ​

  • [ ] Buscar término que coincide con item hijo muestra padre e hijo
  • [ ] Buscar término que coincide con item padre muestra padre y todos sus hijos filtrados
  • [ ] Secciones con resultados se expanden automáticamente

PA-004: Limpiar Búsqueda ​

  • [ ] Click en botón X limpia el input
  • [ ] Al limpiar, todos los items vuelven a mostrarse
  • [ ] Borrar todo el texto manualmente también restaura vista completa

PA-005: Permisos ​

  • [ ] Items sin permiso no aparecen (incluso al buscar)
  • [ ] Búsqueda solo filtra items que el usuario puede ver

PA-006: UX ​

  • [ ] Placeholder "Buscar en el menú..." visible cuando input vacío
  • [ ] Ícono de búsqueda visible al inicio del input
  • [ ] Estilo del input coherente con tema oscuro del sidebar
  • [ ] Transiciones suaves al expandir/colapsar secciones

Referencias Técnicas ​

  • Componente: /ts/core/components/layout/Sidebar.tsx
  • Tipos: /ts/core/types/layout.types.ts (MenuItem, SidebarProps)
  • Configuración estándar: /ts/core/config/standardSidebarSections.ts
  • Ejemplo de uso: /ts/crm/config/crm-sidebar.ts

Última actualización: 2026-01-14