Documentación del Sistema

Appearance

Componentes de Layout - Core ​

Esta sección documenta los componentes de layout del core del sistema, que proporcionan la estructura visual y navegación común a todos los módulos.

Componentes Principales ​

El menú lateral de navegación presente en todos los módulos del sistema.

Características:

  • Navegación jerárquica con secciones y subsecciones
  • Ordenamiento alfabético automático
  • Búsqueda y filtrado en tiempo real
  • Control de acceso basado en permisos
  • Adaptado al tema AdminLTE

Ver: Sidebar - Ordenamiento y Búsqueda

Layout ​

Componente contenedor principal que estructura la aplicación.

Incluye:

  • Navbar (barra superior)
  • Sidebar (menú lateral)
  • Footer (pie de página)
  • Content area (área de contenido)

Barra de navegación superior con información de usuario y controles globales.

Pie de página con información de versión y créditos.

Arquitectura ​

Los componentes de layout están ubicados en:

ts/core/components/layout/
├── Layout.tsx          # Contenedor principal
├── Sidebar.tsx         # Menú lateral
├── Navbar.tsx          # Barra superior
├── Footer.tsx          # Pie de página
├── PageWrapper.tsx     # Wrapper de contenido
├── PageHeader.tsx      # Encabezado de página
└── Preloader.tsx       # Indicador de carga

Uso en Módulos ​

Cada módulo del sistema (CRM, Contabilidad, Ventas, etc.) utiliza estos componentes mediante configuración:

typescript
import { Layout } from '@/core/components/layout/Layout';

const sidebarConfig = {
    moduleTitle: 'Módulo CRM',
    moduleLoc: '?loc=mcrm',
    menuItems: getCRMSidebarConfig(),
};

<Layout sidebarConfig={sidebarConfig}>
    {/* Contenido del módulo */}
</Layout>

Última actualización: 2026-01-14