> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compago.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Cómo editar un rol
> Cambia el nombre, el color o los permisos de un rol, y el cambio aplica a todas las personas que lo tienen.
export const SupportBox = () => ;
export const GuideImage = ({src, preview, alt, width, height, caption, variant = 'screen'}) => {
const [open, setOpen] = useState(false);
const [view, setView] = useState(null);
const opener = useRef(null);
const dialog = useRef(null);
const viewport = useRef(null);
const closeButton = useRef(null);
const fitScale = useRef(1);
const drag = useRef(null);
const long = height / width > 1.6;
const icon = (d, size = 18) => ;
const ZOOM_IN = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M11 8v6M8 11h6';
const ZOOM_OUT = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M8 11h6';
const FIT = 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2';
const DOWNLOAD = 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const clampView = next => {
const el = viewport.current;
if (!el) return next;
const w = width * next.scale;
const h = height * next.scale;
const keep = 96;
const x = w <= el.clientWidth ? (el.clientWidth - w) / 2 : Math.min(keep, Math.max(el.clientWidth - w - keep, next.x));
const y = h <= el.clientHeight ? (el.clientHeight - h) / 2 : Math.min(keep, Math.max(el.clientHeight - h - keep, next.y));
return {
scale: next.scale,
x,
y
};
};
const fit = () => {
const el = viewport.current;
if (!el) return;
const scale = long ? Math.min(1, el.clientWidth * 0.94 / width) : Math.min(1, el.clientWidth * 0.94 / width, el.clientHeight * 0.88 / height);
fitScale.current = scale;
setView(clampView({
scale,
x: (el.clientWidth - width * scale) / 2,
y: long ? 72 : (el.clientHeight - height * scale) / 2
}));
};
const zoomAt = (factor, cx, cy) => {
setView(current => {
const el = viewport.current;
if (!current || !el) return current;
const px = cx ?? el.clientWidth / 2;
const py = cy ?? el.clientHeight / 2;
const scale = Math.min(Math.max(fitScale.current * 0.5, current.scale * factor), Math.max(1.5, fitScale.current * 6));
const ratio = scale / current.scale;
return clampView({
scale,
x: px - (px - current.x) * ratio,
y: py - (py - current.y) * ratio
});
});
};
const panBy = (dx, dy) => setView(current => current && clampView({
...current,
x: current.x + dx,
y: current.y + dy
}));
const close = () => {
setOpen(false);
setView(null);
opener.current?.focus();
};
const show = event => {
opener.current = event.currentTarget;
setOpen(true);
};
const actions = useRef({});
actions.current = {
fit,
zoomAt,
panBy,
close
};
useEffect(() => {
const modal = dialog.current;
if (!open || !modal) return undefined;
if (!modal.open) modal.showModal();
const el = viewport.current;
actions.current.fit();
closeButton.current?.focus();
const onResize = () => actions.current.fit();
const onKey = event => {
const {zoomAt: zoom, panBy: pan} = actions.current;
if (event.key === '+' || event.key === '=') zoom(1.25); else if (event.key === '-' || event.key === '_') zoom(0.8); else if (event.key === '0') actions.current.fit(); else if (event.key === 'ArrowUp') pan(0, 120); else if (event.key === 'ArrowDown') pan(0, -120); else if (event.key === 'ArrowLeft') pan(120, 0); else if (event.key === 'ArrowRight') pan(-120, 0); else return;
event.preventDefault();
};
const onWheel = event => {
event.preventDefault();
const rect = el.getBoundingClientRect();
if (event.ctrlKey || event.metaKey) actions.current.zoomAt(Math.exp(-event.deltaY * 0.0022), event.clientX - rect.left, event.clientY - rect.top); else actions.current.panBy(-event.deltaX, -event.deltaY);
};
const root = document.documentElement;
const overflow = root.style.overflow;
root.style.overflow = 'hidden';
window.addEventListener('resize', onResize);
document.addEventListener('keydown', onKey);
el?.addEventListener('wheel', onWheel, {
passive: false
});
return () => {
root.style.overflow = overflow;
window.removeEventListener('resize', onResize);
document.removeEventListener('keydown', onKey);
el?.removeEventListener('wheel', onWheel);
if (modal.open) modal.close();
};
}, [open]);
const onPointerDown = event => {
if (event.button !== 0) return;
drag.current = {
x: event.clientX,
y: event.clientY,
travel: 0
};
event.currentTarget.setPointerCapture(event.pointerId);
};
const onPointerMove = event => {
const start = drag.current;
if (!start) return;
const dx = event.clientX - start.x;
const dy = event.clientY - start.y;
start.travel += Math.abs(dx) + Math.abs(dy);
start.x = event.clientX;
start.y = event.clientY;
panBy(dx, dy);
};
const onPointerUp = event => {
const start = drag.current;
drag.current = null;
if (!start || start.travel > 6 || !view) return;
const rect = viewport.current.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const inside = x >= view.x && x <= view.x + width * view.scale && y >= view.y && y <= view.y + height * view.scale;
if (!inside) close();
};
const onDoubleClick = event => {
const rect = viewport.current.getBoundingClientRect();
if (view && view.scale > fitScale.current * 1.4) fit(); else zoomAt(2.2, event.clientX - rect.left, event.clientY - rect.top);
};
const percent = view ? Math.round(view.scale / fitScale.current * 100) : 100;
const viewer = open && ;
if (variant === 'guide') {
return
{caption && {caption}}
{viewer}
;
}
return
{caption && {caption}}
{viewer}
;
};
export const GuideVideo = ({src, poster, title, duration, caption}) => {
const dialog = useRef(null);
const player = useRef(null);
const opener = useRef(null);
const resumeAt = useRef(0);
const pageOverflow = useRef('');
const icon = (d, size = 18, fill = false) => ;
const PLAY = 'M9 6.5 18.5 12 9 17.5z';
const MAXIMIZE = 'M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const open = event => {
const modal = dialog.current;
const video = player.current;
if (!modal || !video || modal.open) return;
opener.current = event.currentTarget;
pageOverflow.current = document.documentElement.style.overflow;
document.documentElement.style.overflow = 'hidden';
modal.showModal();
video.currentTime = resumeAt.current;
video.play().catch(() => {});
video.focus();
};
const onClose = () => {
const video = player.current;
if (video) {
resumeAt.current = video.ended ? 0 : video.currentTime;
video.pause();
}
document.documentElement.style.overflow = pageOverflow.current;
opener.current?.focus();
};
const close = () => {
if (dialog.current?.open) dialog.current.close();
};
const fullscreen = () => {
const video = player.current;
if (!video) return;
video.play().catch(() => {});
if (video.requestFullscreen) video.requestFullscreen().catch(() => {}); else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();
};
return
{caption && {caption}}
;
};
Un rol se puede ajustar cuando tu equipo cambia de tareas: le das un permiso nuevo, le quitas uno que ya no usa o le cambias el nombre. El cambio aplica a todas las personas que tienen ese rol, sin que tengas que tocar a cada una.
## Dónde está en la app
* En el menú de la izquierda, abre **Configuraciones** y entra a **Organización**.
* Arriba, haz clic en la pestaña **Roles y permisos**.
* En la tarjeta del rol, haz clic en el botón de los tres puntos y luego en **Editar**.
## Antes de empezar
* Para editar roles, tu rol necesita el permiso **Administrar roles**. El **Dueño** y el **Administrador** lo tienen al empezar.
* No puedes editar el rol que tú tienes, ni un rol con permisos que tu rol no incluye.
* Solo puedes darle a un rol permisos que tu propio rol también tiene.
* El rol **Dueño** tiene todos los permisos y no se puede editar.
## Paso a paso
En **Inicio**, haz clic en **Configuraciones**, en el menú de la izquierda.
Si tu menú solo muestra íconos, **Configuraciones** es el del engrane.
Se abren las secciones de tu configuración. Haz clic en **Organización**.
Estás en **Configuración de organización**. Arriba, haz clic en la pestaña **Roles y permisos**.
Busca el rol que quieres cambiar y haz clic en el botón de los tres puntos, arriba a la derecha de su tarjeta.
El **Dueño** dice **Rol del sistema** y no tiene menú: tiene todos los permisos y no se puede editar.
En el menú, haz clic en **Editar**.
¿Quieres uno parecido sin tocar este? Haz clic en **Duplicar**.
Cambia su nombre, su color o sus permisos. Luego haz clic en **Guardar cambios**.
* Cada permiso que cambias dice **Agregado** o **Quitado** junto a su nombre.
* Abajo de la vista previa ves los permisos que cambian y la nota **Aplican al guardar**: nada cambia para tu equipo hasta que guardes.
* Arriba, **1 cambio sin guardar** cuenta lo que falta por guardar, y **1 persona con este rol** dice a cuántas personas les va a aplicar.
* Si apagas un permiso, se apagan también los que dependen de él. Por ejemplo, al apagar **Ver pagos** se apagan **Cancelar y reembolsar** y **Descargar pagos**, entre otros.
¿Te arrepentiste? Haz clic en la **X** de arriba a la izquierda y luego en **Salir sin guardar**: el rol se queda como estaba.
El rol queda con sus cambios. Quien lo tiene los ve en su siguiente clic.
## Qué pasa después
* Ves el aviso **Cambios guardados**, con **Aplican desde ahora a 1 persona.** cuando alguien tiene el rol.
* Las personas con ese rol ven el cambio en su siguiente clic: no tienen que volver a entrar a su cuenta.
* La tarjeta del rol muestra sus permisos nuevos en **Roles y permisos**.
* El cambio queda registrado en [Actividad](/manual/organizacion/actividad-de-tu-equipo) como **Editó un rol**.
## Preguntas frecuentes
No. Los permisos son del rol, y el cambio aplica a todos los que lo tienen. Si una persona necesita algo distinto, [crea un rol](/manual/organizacion/crear-un-rol) para ella o [duplica uno](/manual/organizacion/duplicar-un-rol) y ajústalo. Luego [cámbiale el rol](/manual/organizacion/cambiar-el-rol-de-alguien).
Porque es el rol que tú tienes, o porque tiene permisos que tu rol no incluye. Pídeselo a otra persona que administre los roles, por ejemplo al **Dueño**.
Si dice **Tu rol no incluye este permiso**, tu propio rol no lo tiene. Si dice **Requiere** y el nombre de otro permiso, prende primero ese. Si dice **Solo el dueño**, ningún rol puede tenerlo.
Prende **Ver comisiones** y **Ver liquidaciones** en **Dinero del negocio**. Ve cómo [dejar que un rol vea tus comisiones y depósitos](/manual/organizacion/dar-acceso-a-comisiones-y-depositos).
No hay un botón para deshacer, pero puedes editar el rol otra vez y dejarlo como estaba. En **Actividad** ves qué cambió y quién lo hizo.
## Errores comunes
### Alguien más cambió este rol desde que lo abriste. Recárgalo antes de guardar.
Otra persona guardó el mismo rol mientras lo editabas. Haz clic en **Recargar** para ver cómo quedó y vuelve a hacer tus cambios.
### Solo puedes editar roles que no sean el tuyo y cuyos permisos también tengas.
Aparece bajo **No puedes editar** y el nombre del rol cuando es el rol que tú tienes o uno con permisos que tu rol no incluye. Pídele el cambio a quien tenga un rol con más permisos, como el **Dueño**, y haz clic en **Volver a roles**.
### Ya hay un rol con ese nombre en tu organización. Elige otro.
Otro rol ya se llama así, aunque sea con mayúsculas distintas. Usa otro nombre.
### Ponle un nombre al rol.
Borraste el **Nombre del rol**. Escribe uno de al menos 2 letras.
### Este rol ya no existe
Alguien eliminó el rol mientras lo tenías abierto, y quienes lo tenían pasaron a otro rol. Haz clic en **Volver a roles**.
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
Cómo funcionan los roles y qué permisos tiene cada uno.
Un rol nuevo con solo los permisos que tu equipo necesita.
Decide qué roles ven el dinero de tu negocio.
Borra un rol que ya no usas y mueve a quien lo tenía.
## ¿Necesitas ayuda?
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.