Panel de Administración
Reglas
- Tablas de datos: paginación, ordenación y filtrado del lado del servidor: nunca cargar todas las filas en el cliente: usar
?page=1&limit=25&sort=createdAt&order=desc - Patrón CRUD: lista (tabla), crear (formulario/modal), leer (vista de detalle), actualizar (formulario de edición), eliminar (diálogo de confirmación): diseño consistente en todos los recursos
- Control de acceso basado en roles: definir roles (admin, editor, viewer) con matriz de permisos: comprobar permisos en el servidor en cada ruta de la API, no solo en la interfaz de usuario
- Operaciones por lotes: seleccionar múltiples filas, acción por lotes (eliminar, exportar, cambiar estado): confirmar acciones destructivas, procesar en segundo plano para lotes grandes
- Búsqueda: búsqueda de texto con debounce (300ms) en campos clave: combinar con filtros de columna para consultas precisas
- Gestión de usuarios: listar usuarios, ver detalles, cambiar roles, deshabilitar/habilitar cuentas, personificar (solo administrador con registro de auditoría)
- Registro de auditoría: registrar quién cambió qué y cuándo:
{ userId, action, resource, resourceId, changes, timestamp } - Diseño: barra de navegación lateral (plegable), migas de pan, título de página con botones de acción: adaptable pero optimizado para escritorio
Patrón de comprobación de permisos
const PERMISSIONS = {
admin: ["users:read", "users:write", "users:delete", "data:read", "data:write", "data:delete"],
editor: ["data:read", "data:write"],
viewer: ["data:read"],
} as const;
function can(role: string, permission: string): boolean {
return PERMISSIONS[role]?.includes(permission) ?? false;
}
// Middleware
if (!can(user.role, "users:write")) return Response.json({ error: "Prohibido" }, { status: 403 });
Patrón de API de tabla de datos
GET /api/admin/users?page=1&limit=25&sort=createdAt&order=desc&search=john&role=admin
Devolución: { data: [...], total: 150, page: 1, limit: 25, totalPages: 6 }
Evitar
- Comprobaciones de permisos solo del lado del cliente: siempre aplicar en el servidor
- Cargar todos los datos y luego paginarlos en el navegador: usar paginación del lado del servidor
- Sin confirmación para acciones destructivas: siempre confirmar eliminaciones y operaciones por lotes
- Falta de registro de auditoría: es necesario saber quién cambió qué