Workbeat Design System
Patrones
Superficies funcionales completas: tablas, expedientes, paneles, dashboards y flujos.
43 patrones en 7 categorías
Listado de directorio y consulta masiva con búsqueda, filtros, tabs, orden, vistas, paginación y selección.
Variante de FullTable con un rail colapsable que alterna entre varios listados.
Catálogos administrables guiados por JSON: columnas, filtros, side panel y acciones por fila; árboles con paginación por raíces, ancestros de contexto y selección de filas visibles.
Navegación lateral de catálogos con búsqueda, modo lista/árbol y ancho redimensionable.
Deprecado: no lo uses en pantallas nuevas. Lo reemplazan CatalogExplorerSidebar + CatalogExplorerLayout (el DS todavía lo exporta).
Vista previa de datos importados con edición inline, estatus por fila y validación.
Tabla de árbol (organigramas, niveles) con expandir/colapsar, columna sticky y agregados por nodo.
Tabla simple con búsqueda y popover de filtros.
Tabla embebida en un `SectionCard`, con selector de columnas opcional.
Vistas masivas por sección de expediente en `/config/expediente/*`: FullTable + EmployeeIdentityCell + detalle read-only.
Arquitectura de pantallas de expediente: SideNav obligatorio, SectionCard y SideCanvas.
Árbol + ficha del módulo organizacional (departamentos, equipos, sucursales) con contexto preservado.
Resumen de campos en lectura que abre la edición en un side panel.
Sección de sólo lectura con pares etiqueta/valor.
Rail vertical de sub-secciones de un detalle, cada una con su URL.
Celda de identidad de persona: avatar heredado, nombre y sublínea. showAvatar={false} omite la foto/iniciales para identificadores que no son nombres; subtitle reemplaza número y puesto.
Lista de tareas con panel de detalle.
Vista previa efectiva (read-only) de una sección en Tipos de expediente.
Side panel de crear/editar/ver con secciones, grid de campos y campos compartidos.
Side panel dinámico basado en schema para entradas de catálogo (`DynamicEditSidePanel`, `EntityDetailPanel`).
Edición de una sección de expediente en side panel a partir del schema efectivo.
Wizard lineal multi-paso dentro de un side panel.
Constructor de flujos con sidebar, área de trabajo y pasos arrastrables.
Confirmación de acciones masivas sobre una selección.
Botón de acción declarativo resuelto por un registro de acciones.
Dashboard operativo por secciones: KPIs, acciones rápidas, charts y actividad reciente.
Tarjeta de KPI numérico con tendencia, icono y metadata; `KpiGrid` para la grilla.
Gráficas con `ChartContainer` (Recharts) o `IndexBar`, con colores del theme y datos vía service objects.
Barra compacta de estatus (48–64 px) sobre una tabla.
Estándar visual obligatorio del `<thead>` de grids admin (tokens `TABLE_HEADER_*`).
Toolbar estilo Catálogos Generales para grids embebidos que no adoptan CatalogGrid.
Acciones por fila (menú y acciones inline) separadas de las acciones globales.
Estados vacío, sin resultados, error y sin permiso para grids, tablas y listas.
Filtros multi-regla AND/OR (campo · operador · valor) para grids admin.
Link de celda de tabla hacia el detalle de la entidad.
Formulario generado desde un `FormDef` / JSON schema.
Etiqueta de campo con tooltip de ayuda.
Select de un valor sobre un catálogo grande en memoria (país, estado, ciudad).
Cambio en línea entre 2–4 vistas mutuamente excluyentes.
Asistente de configuración inicial con progreso por sección.
Grilla de secciones de configuración con estado.
Carga progresiva por capas para `/config/*` y contenido lazy en SideCanvas (`DelayedSuspense` + skeletons).
Inicia una conversación de workflow con IA desde cualquier superficie (`useStartAiWorkflowConversation`).