Design System · Demo
Fundamentos, patrones y componentes del Design System con estructura guiada.
Patrones
Vistas demo orientadas a patrones compuestos del producto.
Dashboard operativo
Patrón: dashboard + kpi-card + section-card + ai-insight-panel
Vista tipo home con KPIs, acciones primarias, bloques analíticos, actividad reciente e insights.
Charts analíticos
Patrón: charts (recharts + indexbar)
Escenarios de tendencia, comparativo, composición y radar para ejemplificar el patrón charts.
Consulta masiva
Patrón: full-table
Directorio consultivo con búsqueda, filtros, segmentación, vistas y estados de carga.
Consulta masiva con rail
Patrón: full-table + full-table-with-side-nav
Workspace de listados afines con rail lateral, header compartido y defs intercambiables.
Navegación organizacional
Patrón: org-navigation
Árbol jerárquico + ficha de detalle reutilizable en modo desktop y maestro-detalle móvil.
Expediente seccionado
Patrón: expediente
Vista de expediente con SideNav sincronizado, StickyHeader contextual, secciones y tablas embebidas.
Catálogo administrable
Patrón: catalog-grid
Grid de catálogo con filtros, acciones por fila, side panel y datos mock editables solo en memoria.
Ficha editable
Patrón: editable-card
Detalle por secciones con lectura, edición, validación y variantes read-only / always-editing.
Jerarquía tabular
Patrón: hierarchy-table
Vista tabular de estructura con expand/collapse, columnas visibles y navegación de organigrama.
Galería KPI
Patrón: kpi-card
Resumen visual de métricas con variantes stacked e inline, tendencias y metadata contextual.
Sección con tabla
Patrón: section-table-card
Bloque tabular embebido con header, acciones, control de columnas y estados vacíos para detalle.
Detalle de tareas
Patrón: tasks-details
Workspace maestro-detalle para revisar tareas, responsables, prioridad y contexto operativo.
Workflow builder
Patrón: steps-composer
Compositor de pasos con lista lateral de workflows, área de trabajo y reorder drag-and-drop.