# 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*