template-saas/docs/05-frontend/pages/PAGE-RBAC.md

RBAC Pages Specification

Modulo: rbac Ultima actualizacion: 2026-02-03 Total Paginas: 2

---

1. RolesPage

Ruta: /dashboard/rbac/roles Archivo: src/pages/dashboard/rbac/RolesPage.tsx

Descripcion

Gestion de roles de usuario. Vista master-detail con lista de roles a la izquierda y detalle de permisos a la derecha.

Componentes Utilizados

• Search Input - Busqueda de roles
• Roles List - Lista seleccionable de roles
• Role Card - Tarjeta de rol con icono y contador
• Role Detail Panel - Panel derecho con info y permisos
• Permission Tags - Tags agrupados por categoria
• Lock Icon - Indica roles de sistema
• Icons: Shield, Plus, Search, Edit, Trash2, Lock (lucide-react)

Hooks Utilizados

• useRoles() - Lista todos los roles
• usePermissions() - Lista todos los permisos (para agrupar)
• useDeleteRole() - Elimina rol
• getPermissionCategoryLabel() - Labels de categorias

Funcionalidades

1. Buscar roles por nombre
2. Ver lista de roles con contador de permisos
3. Identificar roles de sistema (bloqueados)
4. Seleccionar rol para ver detalle
5. Ver info del rol (tipo, default, slug)
6. Ver permisos agrupados por categoria
7. Editar y eliminar roles custom (no system)

Estados

• Loading: Spinner en lista
• Success: Layout master-detail
• No Selection: Panel derecho con mensaje "Select a role"
• Empty Search: Mensaje "No roles found"

Acciones del Usuario

Accion	Resultado
Click "New Role"	Navega a /rbac/roles/new
Buscar	Filtra lista de roles
Click en rol	Selecciona y muestra detalle
Click "Edit"	Navega a edicion (solo custom)
Click "Delete"	Confirm + elimina (solo custom)
Click en rol system	Alerta "System roles cannot be deleted"

Permisos Requeridos

• rbac:read - Ver roles y permisos
• rbac:write - Crear/editar roles
• rbac:delete - Eliminar roles

Notas

• Roles de sistema (is_system: true) no pueden editarse ni eliminarse
• El rol default se asigna automaticamente a nuevos usuarios

---

2. PermissionsPage

Ruta: /dashboard/rbac/permissions Archivo: src/pages/dashboard/rbac/PermissionsPage.tsx

Descripcion

Vista de todos los permisos del sistema. Solo lectura, agrupados por categoria con filtros.

Componentes Utilizados

• Stats Cards - Metricas de permisos
• Search Input - Busqueda de permisos
• Category Filter Select - Filtro por categoria
• Permissions List - Lista agrupada por categoria
• Permission Item - Item con nombre, action badge, descripcion, slug
• Action Badge - Badge con color segun accion (read, write, delete, assign)
• Icons: Key, Shield, Filter, Search (lucide-react)

Hooks Utilizados

• usePermissions() - Lista todos los permisos
• getPermissionCategoryLabel(category) - Label de categoria
• getPermissionActionLabel(action) - Label de accion

Funcionalidades

1. Ver estadisticas (total permisos, categorias, filtrados)
2. Buscar por nombre, slug o descripcion
3. Filtrar por categoria
4. Ver permisos agrupados por categoria
5. Ver accion con color (read=gray, write=yellow, delete=red, assign=purple)
6. Ver slug tecnico de cada permiso

Estados

• Loading: Spinner centrado
• Error: Mensaje de error
• Success: Lista agrupada
• Empty Filter: Icono + mensaje "No permissions found matching your criteria"

Acciones del Usuario

Accion	Resultado
Buscar	Filtra permisos
Seleccionar categoria	Filtra por categoria
(Solo lectura)	-

Permisos Requeridos

• rbac:read - Ver permisos

Notas

• Esta pagina es SOLO lectura
• Los permisos son definidos por el sistema, no se pueden crear/editar/eliminar
• Sirve como referencia para administradores al asignar roles

---

Diagrama de Flujo RBAC

Usuario → tiene → Roles
Roles → tienen → Permisos
Permisos → definen → Acciones permitidas

Ejemplo:
- Usuario "John"
  → Rol "Admin"
    → Permiso "users:read" (puede ver usuarios)
    → Permiso "users:write" (puede editar usuarios)
    → Permiso "users:delete" (puede eliminar usuarios)

---

Documentacion generada - Template SaaS - 2026-02-03