@zauru-sdk/components 6.8.3 → 6.10.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.10.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.9.0...@zauru-sdk/components@6.10.0) (2026-10-05)
+
+
+### Features
+
+* menú Configuración genérico y extras de asignación fuera del SDK ([2691957](https://github.com/intuitiva/zauru-typescript-sdk/commit/2691957c9dba23226a4b8d371fee26b221e126f0))
+
+
+
+
+
+# [6.9.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.3...@zauru-sdk/components@6.9.0) (2026-10-05)
+
+
+### Features
+
+* motor RBAC genérico para webapps Remix (roles, asignaciones y matriz) ([b48c635](https://github.com/intuitiva/zauru-typescript-sdk/commit/b48c635101814ebf0b362636839b626d23a13b57))
+
+
+
+
+
 ## [6.8.3](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.2...@zauru-sdk/components@6.8.3) (2026-10-05)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/NavBar/NavBar.d.ts

@@ -1,2 +1,2 @@
 import type { NavBarProps } from "./NavBar.types.js";
-export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, showDarkModeToggle, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, settingsOption, showDarkModeToggle, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/NavBar/NavBar.types.d.ts

@@ -17,6 +17,7 @@ export type NavBarProps = {
     LinkComponent?: any;
     version?: string;
     reloadCatalogsOption?: boolean;
+    settingsOption?: boolean;
     showDarkModeToggle?: boolean;
 };
 export type NavBarStateProps = {

package/dist/Tab/PermissionMatrix.d.ts

@@ -0,0 +1,21 @@
+import type { PermissionGroup } from "@zauru-sdk/types";
+export type PermissionMatrixRole = {
+    id: number;
+    name: string;
+    permissionKeys: string[];
+};
+type Props = {
+    groups: PermissionGroup[];
+    roles: PermissionMatrixRole[];
+    disabled?: boolean;
+    pendingCells?: ReadonlySet<string>;
+    onToggle: (roleId: number, key: string, granted: boolean) => void;
+    onBulkRole?: (roleId: number, mode: "all" | "none") => void;
+    onBulkSection?: (roleId: number, groupId: string, mode: "add" | "remove") => void;
+    emptyText?: string;
+    markAllLabel?: string;
+    unmarkAllLabel?: string;
+};
+export declare function permissionMatrixCellKey(roleId: number, key: string): string;
+export declare const PermissionMatrix: ({ groups, roles, disabled, pendingCells, onToggle, onBulkRole, onBulkSection, emptyText, markAllLabel, unmarkAllLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tab/RouteTabNav.d.ts

@@ -0,0 +1,13 @@
+export type RouteTabNavItem = {
+    to: string;
+    label: string;
+    hide?: boolean;
+    end?: boolean;
+};
+type Props = {
+    items: RouteTabNavItem[];
+    ariaLabel?: string;
+    selectedColor?: "indigo" | "slate" | "blue" | "green";
+};
+export declare const RouteTabNav: ({ items, ariaLabel, selectedColor, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Tab/WebappSettingsChrome.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    showEmployees?: boolean;
+    showRoles?: boolean;
+    showPermissions?: boolean;
+    basePath?: string;
+    title?: string;
+    description?: string;
+};
+export declare const WebappSettingsChrome: ({ children, showEmployees, showRoles, showPermissions, basePath, title, description, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tab/index.d.ts

@@ -1 +1,4 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";
+export * from "./WebappSettingsChrome.js";

package/dist/esm/NavBar/NavBar.js

@@ -4,9 +4,9 @@ import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonS
 import { COLORS } from "./NavBar.utils.js";
 import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
-const OptionsDropDownButton = ({ color, options, name }) => {
+const OptionsDropDownButton = ({ color, options, name, ariaLabel, }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
-    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
+    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { type: "button", "aria-label": ariaLabel ?? (typeof name === "string" ? name : "Menú"), "aria-haspopup": "menu", "aria-expanded": !showOptionsMenu, onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
 };
 const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotificationBadge, }) => {
     const location = useLocation();
@@ -30,7 +30,7 @@ const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotific
             // De lo contrario, usamos el color normal (bg700)
             className: `${isActive ? specialColor.bg900 : specialColor.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`, children: _jsxs(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative", to: link, children: [_jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }), notificationBadge !== undefined && (_jsx("span", { className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5", children: notificationBadge }))] }) }) }));
 };
-export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, showDarkModeToggle = false, }) => {
+export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, settingsOption, showDarkModeToggle = false, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
     const [currentVersion, setCurrentVersion] = useState(version);
@@ -56,11 +56,12 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
     const options = useMemo(() => {
         return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items
                         .filter((item) => item.loggedIn === loggedIn)
-                        .filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
+                        .filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, ariaLabel: "Men\u00FA de usuario", options: [
+                            settingsOption && (_jsx(Link, { className: "block cursor-pointer px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white", to: "/configuracion", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: "h-5 w-5 mr-1", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("path", { d: "M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" }), _jsx("path", { d: "M19.4 13a7.7 7.7 0 0 0 .06-2l2.1-1.64-2-3.46-2.55 1a7.7 7.7 0 0 0-1.73-1L14.7 2H9.3l-.58 2.9a7.7 7.7 0 0 0-1.73 1l-2.55-1-2 3.46L4.54 11a7.7 7.7 0 0 0 0 2l-2.1 1.64 2 3.46 2.55-1a7.7 7.7 0 0 0 1.73 1L9.3 22h5.4l.58-2.9a7.7 7.7 0 0 0 1.73-1l2.55 1 2-3.46Z" })] }), _jsx("span", { children: "Configuraci\u00F3n" })] }) }, "configuracion")),
                             reloadCatalogsOption && (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/reload-catalogs", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: `h-5 w-5 mr-1`, width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M20.5 8c-1.392-3.179-4.823-5-8.522-5C7.299 3 3.453 6.552 3 11.1" }), _jsx("path", { d: "M16.489 8.4h3.97A.54.54 0 0 0 21 7.86V3.9M3.5 16c1.392 3.179 4.823 5 8.522 5 4.679 0 8.525-3.552 8.978-8.1" }), _jsx("path", { d: "M7.511 15.6h-3.97a.54.54 0 0 0-.541.54v3.96" })] }), _jsx("span", { children: "Recargar cat\u00E1logos" })] }) }, "recargar-catalogos")),
                             showDarkModeToggle && (_jsx("button", { type: "button", className: "block w-full cursor-pointer text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white", onClick: () => setIsDarkMode((value) => !value), children: _jsx("div", { className: "mx-auto pt-2", children: _jsx("span", { children: isDarkMode ? "Modo claro" : "Modo oscuro" }) }) }, "dark-mode-toggle")),
                             _jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }, "cerrar-sesion"),
                         ] })) })] }));
-    }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
+    }, [items, loggedIn, hiddenItemsChange, reloadCatalogsOption, settingsOption, showDarkModeToggle, isDarkMode]);
     return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsxs(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Tab/PermissionMatrix.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function permissionMatrixCellKey(roleId, key) {
+    return `${roleId}:${key}`;
+}
+const checkboxClass = "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
+export const PermissionMatrix = ({ groups, roles, disabled = false, pendingCells, onToggle, onBulkRole, onBulkSection, emptyText = "Crea un rol para editar la matriz de permisos.", markAllLabel = "Marcar todo", unmarkAllLabel = "Desmarcar todo", }) => {
+    const allKeys = groups.flatMap((group) => group.actions.map((action) => action.key));
+    if (roles.length === 0) {
+        return (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: emptyText }));
+    }
+    const roleHasKeys = (role, keys) => keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
+    return (_jsx("div", { className: "overflow-x-auto rounded-md border border-gray-200", children: _jsxs("table", { className: "min-w-full border-collapse text-sm", children: [_jsx("caption", { className: "sr-only", children: "Matriz de permisos por rol. Filas son acciones, columnas son roles." }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { scope: "col", className: "sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800", children: "Permiso" }), roles.map((role) => {
+                                const allGranted = roleHasKeys(role, allKeys);
+                                return (_jsx("th", { scope: "col", className: "min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800", children: _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: "break-words", children: role.name }), onBulkRole ? (_jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded", disabled: disabled, onClick: () => onBulkRole(role.id, allGranted ? "none" : "all"), children: allGranted ? unmarkAllLabel : markAllLabel })) : null] }) }, role.id));
+                            })] }) }), _jsx("tbody", { children: groups.map((group) => {
+                        const sectionKeys = group.actions.map((action) => action.key);
+                        return (_jsx(GroupRows, { group: group, roles: roles, sectionKeys: sectionKeys, disabled: disabled, pendingCells: pendingCells, onToggle: onToggle, onBulkSection: onBulkSection, checkboxClass: checkboxClass }, group.id));
+                    }) })] }) }));
+};
+function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle, onBulkSection, checkboxClass, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { className: "bg-slate-100", children: _jsx("th", { scope: "colgroup", colSpan: roles.length + 1, className: "sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700", children: group.label }) }), group.actions.map((action) => (_jsxs("tr", { className: "odd:bg-white even:bg-slate-50", children: [_jsx("th", { scope: "row", className: "sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: action.label }), _jsx("code", { className: "text-xs text-gray-500", children: action.key })] }) }), roles.map((role) => {
+                        const granted = role.permissionKeys.includes(action.key);
+                        const cellKey = permissionMatrixCellKey(role.id, action.key);
+                        const pending = pendingCells?.has(cellKey) ?? false;
+                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
+                    })] }, action.key))), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500", children: "Secci\u00F3n" }), roles.map((role) => {
+                        const sectionGranted = sectionKeys.every((key) => role.permissionKeys.includes(key));
+                        return (_jsx("td", { className: "border-b border-l border-gray-200 px-3 py-1 text-center", children: _jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled, onClick: () => onBulkSection(role.id, group.id, sectionGranted ? "remove" : "add"), children: sectionGranted ? "Quitar sección" : "Marcar sección" }) }, role.id));
+                    })] })) : null] }));
+}

package/dist/esm/Tab/RouteTabNav.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavLink } from "@remix-run/react";
+const ACTIVE = {
+    indigo: "border-indigo-600 text-indigo-700",
+    slate: "border-slate-700 text-slate-800",
+    blue: "border-blue-600 text-blue-700",
+    green: "border-green-600 text-green-700",
+};
+export const RouteTabNav = ({ items, ariaLabel = "Secciones", selectedColor = "indigo", }) => {
+    const visible = items.filter((item) => !item.hide);
+    if (visible.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { "aria-label": ariaLabel, className: "border-b border-gray-200", children: _jsx("ul", { className: "flex flex-wrap gap-1 -mb-px", children: visible.map((item) => (_jsx("li", { children: _jsx(NavLink, { to: item.to, end: item.end, className: ({ isActive }) => [
+                        "inline-flex items-center cursor-pointer rounded-t-md border-b-2 px-3 py-2 text-sm font-medium transition-colors duration-150",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",
+                        isActive
+                            ? ACTIVE[selectedColor]
+                            : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-800",
+                    ].join(" "), children: item.label }) }, item.to))) }) }));
+};

package/dist/esm/Tab/WebappSettingsChrome.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { RouteTabNav } from "./RouteTabNav.js";
+export const WebappSettingsChrome = ({ children, showEmployees = true, showRoles = true, showPermissions = true, basePath = "/configuracion", title = "Configuración", description = "Roles, empleados y permisos de esta aplicación.", }) => {
+    const base = basePath.replace(/\/$/, "");
+    return (_jsx(MainContainer, { children: _jsxs(SubContainer, { title: title, description: description, children: [_jsx(RouteTabNav, { ariaLabel: "Secciones de configuraci\u00F3n de accesos", selectedColor: "indigo", items: [
+                        {
+                            to: `${base}/empleados`,
+                            label: "Empleados",
+                            hide: !showEmployees,
+                        },
+                        {
+                            to: `${base}/roles`,
+                            label: "Roles",
+                            hide: !showRoles,
+                        },
+                        {
+                            to: `${base}/permisos`,
+                            label: "Permisos",
+                            hide: !showPermissions,
+                        },
+                    ] }), children] }) }));
+};

package/dist/esm/Tab/index.js

@@ -1 +1,4 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";
+export * from "./WebappSettingsChrome.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.8.3",
+  "version": "6.10.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.8.3",
-    "@zauru-sdk/hooks": "^6.3.16",
+    "@zauru-sdk/common": "^6.8.5",
+    "@zauru-sdk/hooks": "^6.3.18",
     "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.5.14",
-    "@zauru-sdk/types": "^6.21.0",
-    "@zauru-sdk/utils": "^6.20.0",
+    "@zauru-sdk/redux": "^6.5.16",
+    "@zauru-sdk/types": "^6.23.0",
+    "@zauru-sdk/utils": "^6.22.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "7d373b9f5c25ab0198e72590c661bc9eb17cf80f"
+  "gitHead": "a3c1f2af46acb59cf9fcb78ecb18d904e33c61e5"
 }

package/src/NavBar/NavBar.tsx

@@ -15,7 +15,12 @@ import type {
 import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
 
-const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
+const OptionsDropDownButton = ({
+  color,
+  options,
+  name,
+  ariaLabel,
+}: EntityProps & { ariaLabel?: string }) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
 
   return (
@@ -23,8 +28,14 @@ const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
       <div className="flex justify-center">
         <div className="relative inline-block">
           <button
+            type="button"
+            aria-label={
+              ariaLabel ?? (typeof name === "string" ? name : "Menú")
+            }
+            aria-haspopup="menu"
+            aria-expanded={!showOptionsMenu}
             onClick={() => setShowOptionsMenu(!showOptionsMenu)}
-            className={`relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
+            className={`relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2`}
           >
             {name ?? <OpcionButtonSvgIcon />}
             <DropDownArrowSvgIcon />
@@ -128,6 +139,7 @@ export const NavBar = ({
   selectedColor,
   version,
   reloadCatalogsOption,
+  settingsOption,
   showDarkModeToggle = false,
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
@@ -191,7 +203,35 @@ export const NavBar = ({
           {loggedIn && (
             <OptionsDropDownButton
               color={color}
+              ariaLabel="Menú de usuario"
               options={[
+                settingsOption && (
+                  <Link
+                    key="configuracion"
+                    className="block cursor-pointer px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+                    to="/configuracion"
+                  >
+                    <div className="mx-auto pt-2">
+                      <svg
+                        className="h-5 w-5 mr-1"
+                        width="24"
+                        height="24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        viewBox="0 0 24 24"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
+                        <path d="M19.4 13a7.7 7.7 0 0 0 .06-2l2.1-1.64-2-3.46-2.55 1a7.7 7.7 0 0 0-1.73-1L14.7 2H9.3l-.58 2.9a7.7 7.7 0 0 0-1.73 1l-2.55-1-2 3.46L4.54 11a7.7 7.7 0 0 0 0 2l-2.1 1.64 2 3.46 2.55-1a7.7 7.7 0 0 0 1.73 1L9.3 22h5.4l.58-2.9a7.7 7.7 0 0 0 1.73-1l2.55 1 2-3.46Z" />
+                      </svg>
+                      <span>Configuración</span>
+                    </div>
+                  </Link>
+                ),
                 reloadCatalogsOption && (
                   <Link
                     key="recargar-catalogos"
@@ -247,7 +287,7 @@ export const NavBar = ({
         </ul>
       </>
     );
-  }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
+  }, [items, loggedIn, hiddenItemsChange, reloadCatalogsOption, settingsOption, showDarkModeToggle, isDarkMode]);
 
   return (
     <nav className={`py-3 ${color.bg600}`}>

package/src/NavBar/NavBar.types.ts

@@ -32,6 +32,7 @@ export type NavBarProps = {
   LinkComponent?: any;
   version?: string;
   reloadCatalogsOption?: boolean;
+  settingsOption?: boolean;
   showDarkModeToggle?: boolean;
 };
 

package/src/Tab/PermissionMatrix.tsx

@@ -0,0 +1,223 @@
+import type { PermissionGroup } from "@zauru-sdk/types";
+
+export type PermissionMatrixRole = {
+  id: number;
+  name: string;
+  permissionKeys: string[];
+};
+
+type Props = {
+  groups: PermissionGroup[];
+  roles: PermissionMatrixRole[];
+  disabled?: boolean;
+  pendingCells?: ReadonlySet<string>;
+  onToggle: (roleId: number, key: string, granted: boolean) => void;
+  onBulkRole?: (roleId: number, mode: "all" | "none") => void;
+  onBulkSection?: (
+    roleId: number,
+    groupId: string,
+    mode: "add" | "remove",
+  ) => void;
+  emptyText?: string;
+  markAllLabel?: string;
+  unmarkAllLabel?: string;
+};
+
+export function permissionMatrixCellKey(roleId: number, key: string): string {
+  return `${roleId}:${key}`;
+}
+
+const checkboxClass =
+  "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
+
+export const PermissionMatrix = ({
+  groups,
+  roles,
+  disabled = false,
+  pendingCells,
+  onToggle,
+  onBulkRole,
+  onBulkSection,
+  emptyText = "Crea un rol para editar la matriz de permisos.",
+  markAllLabel = "Marcar todo",
+  unmarkAllLabel = "Desmarcar todo",
+}: Props) => {
+  const allKeys = groups.flatMap((group) =>
+    group.actions.map((action) => action.key),
+  );
+
+  if (roles.length === 0) {
+    return (
+      <p className="text-sm text-gray-600" role="status">
+        {emptyText}
+      </p>
+    );
+  }
+
+  const roleHasKeys = (role: PermissionMatrixRole, keys: string[]) =>
+    keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
+
+  return (
+    <div className="overflow-x-auto rounded-md border border-gray-200">
+      <table className="min-w-full border-collapse text-sm">
+        <caption className="sr-only">
+          Matriz de permisos por rol. Filas son acciones, columnas son roles.
+        </caption>
+        <thead>
+          <tr className="bg-gray-50">
+            <th
+              scope="col"
+              className="sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800"
+            >
+              Permiso
+            </th>
+            {roles.map((role) => {
+              const allGranted = roleHasKeys(role, allKeys);
+              return (
+                <th
+                  key={role.id}
+                  scope="col"
+                  className="min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800"
+                >
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="break-words">{role.name}</span>
+                    {onBulkRole ? (
+                      <button
+                        type="button"
+                        className="cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
+                        disabled={disabled}
+                        onClick={() =>
+                          onBulkRole(role.id, allGranted ? "none" : "all")
+                        }
+                      >
+                        {allGranted ? unmarkAllLabel : markAllLabel}
+                      </button>
+                    ) : null}
+                  </div>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => {
+            const sectionKeys = group.actions.map((action) => action.key);
+            return (
+              <GroupRows
+                key={group.id}
+                group={group}
+                roles={roles}
+                sectionKeys={sectionKeys}
+                disabled={disabled}
+                pendingCells={pendingCells}
+                onToggle={onToggle}
+                onBulkSection={onBulkSection}
+                checkboxClass={checkboxClass}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+function GroupRows({
+  group,
+  roles,
+  sectionKeys,
+  disabled,
+  pendingCells,
+  onToggle,
+  onBulkSection,
+  checkboxClass,
+}: {
+  group: PermissionGroup;
+  roles: PermissionMatrixRole[];
+  sectionKeys: string[];
+  disabled: boolean;
+  pendingCells?: ReadonlySet<string>;
+  onToggle: Props["onToggle"];
+  onBulkSection: Props["onBulkSection"];
+  checkboxClass: string;
+}) {
+  return (
+    <>
+      <tr className="bg-slate-100">
+        <th
+          scope="colgroup"
+          colSpan={roles.length + 1}
+          className="sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700"
+        >
+          {group.label}
+        </th>
+      </tr>
+      {group.actions.map((action) => (
+        <tr key={action.key} className="odd:bg-white even:bg-slate-50">
+          <th
+            scope="row"
+            className="sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800"
+          >
+            <div className="flex flex-col gap-0.5">
+              <span>{action.label}</span>
+              <code className="text-xs text-gray-500">{action.key}</code>
+            </div>
+          </th>
+          {roles.map((role) => {
+            const granted = role.permissionKeys.includes(action.key);
+            const cellKey = permissionMatrixCellKey(role.id, action.key);
+            const pending = pendingCells?.has(cellKey) ?? false;
+            return (
+              <td
+                key={role.id}
+                className="border-b border-l border-gray-100 px-3 py-2 text-center"
+              >
+                <input
+                  type="checkbox"
+                  className={checkboxClass}
+                  checked={granted}
+                  disabled={disabled || pending}
+                  aria-label={`${role.name}: ${action.label}`}
+                  onChange={() => onToggle(role.id, action.key, !granted)}
+                />
+              </td>
+            );
+          })}
+        </tr>
+      ))}
+      {onBulkSection ? (
+        <tr>
+          <td className="sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500">
+            Sección
+          </td>
+          {roles.map((role) => {
+            const sectionGranted = sectionKeys.every((key) =>
+              role.permissionKeys.includes(key),
+            );
+            return (
+              <td
+                key={role.id}
+                className="border-b border-l border-gray-200 px-3 py-1 text-center"
+              >
+                <button
+                  type="button"
+                  className="cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled={disabled}
+                  onClick={() =>
+                    onBulkSection(
+                      role.id,
+                      group.id,
+                      sectionGranted ? "remove" : "add",
+                    )
+                  }
+                >
+                  {sectionGranted ? "Quitar sección" : "Marcar sección"}
+                </button>
+              </td>
+            );
+          })}
+        </tr>
+      ) : null}
+    </>
+  );
+}

package/src/Tab/RouteTabNav.tsx

@@ -0,0 +1,62 @@
+import { NavLink } from "@remix-run/react";
+
+export type RouteTabNavItem = {
+  to: string;
+  label: string;
+  hide?: boolean;
+  end?: boolean;
+};
+
+type Props = {
+  items: RouteTabNavItem[];
+  ariaLabel?: string;
+  selectedColor?: "indigo" | "slate" | "blue" | "green";
+};
+
+const ACTIVE: Record<NonNullable<Props["selectedColor"]>, string> = {
+  indigo: "border-indigo-600 text-indigo-700",
+  slate: "border-slate-700 text-slate-800",
+  blue: "border-blue-600 text-blue-700",
+  green: "border-green-600 text-green-700",
+};
+
+export const RouteTabNav = ({
+  items,
+  ariaLabel = "Secciones",
+  selectedColor = "indigo",
+}: Props) => {
+  const visible = items.filter((item) => !item.hide);
+
+  if (visible.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className="border-b border-gray-200"
+    >
+      <ul className="flex flex-wrap gap-1 -mb-px">
+        {visible.map((item) => (
+          <li key={item.to}>
+            <NavLink
+              to={item.to}
+              end={item.end}
+              className={({ isActive }) =>
+                [
+                  "inline-flex items-center cursor-pointer rounded-t-md border-b-2 px-3 py-2 text-sm font-medium transition-colors duration-150",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",
+                  isActive
+                    ? ACTIVE[selectedColor]
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-800",
+                ].join(" ")
+              }
+            >
+              {item.label}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

package/src/Tab/WebappSettingsChrome.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { RouteTabNav } from "./RouteTabNav.js";
+
+type Props = {
+  children: ReactNode;
+  showEmployees?: boolean;
+  showRoles?: boolean;
+  showPermissions?: boolean;
+  basePath?: string;
+  title?: string;
+  description?: string;
+};
+
+export const WebappSettingsChrome = ({
+  children,
+  showEmployees = true,
+  showRoles = true,
+  showPermissions = true,
+  basePath = "/configuracion",
+  title = "Configuración",
+  description = "Roles, empleados y permisos de esta aplicación.",
+}: Props) => {
+  const base = basePath.replace(/\/$/, "");
+  return (
+    <MainContainer>
+      <SubContainer title={title} description={description}>
+        <RouteTabNav
+          ariaLabel="Secciones de configuración de accesos"
+          selectedColor="indigo"
+          items={[
+            {
+              to: `${base}/empleados`,
+              label: "Empleados",
+              hide: !showEmployees,
+            },
+            {
+              to: `${base}/roles`,
+              label: "Roles",
+              hide: !showRoles,
+            },
+            {
+              to: `${base}/permisos`,
+              label: "Permisos",
+              hide: !showPermissions,
+            },
+          ]}
+        />
+        {children}
+      </SubContainer>
+    </MainContainer>
+  );
+};

package/src/Tab/index.ts

@@ -1 +1,4 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";
+export * from "./WebappSettingsChrome.js";