Workbeat Design System

OrgNavigation

Árbol + ficha del módulo organizacional (departamentos, equipos, sucursales) con contexto preservado.

Importa por subruta del DS local (`src/design-system`). El barrel `@/design-system` también lo reexporta.

import { OrgNavigationShell, FichaOrganizacional } from "@/design-system/components/patterns/org-navigation";

Cada ejemplo se renderiza con el código real del DS; abre el código para copiarlo.

Composición reusable: OrgTreeNavigation + OrgNavigationShell + FichaOrganizacional (header + tabs + content en un solo componente controlado).

Reglas responsive del patrón

Desktop (lg+): árbol y ficha visibles al mismo tiempo.
Móvil (<lg): modo maestro-detalle con vistas exclusivas (árbol o ficha).
Al seleccionar un nodo en el árbol, se abre la ficha y aparece botón de regreso al árbol.
Si hay navegación a un elemento específico, inicializa mobileView en "detail"; en flujo general inicia en "tree".

Operaciones Tienda · Centro de costo OPS-101

Cobro y atención al cliente en línea de cajas.

ResponsableLiderazgo Org·40personas·3 vacantes

Nombre

Cajas

Ubicación

Nacional

Personas

Vacantes

Generada desde los tipos y el JSDoc del código fuente.

Reglas del DS y plantillas para pedirle este componente a un agente.