Some checks are pending
CI Pipeline / changes (push) Waiting to run
CI Pipeline / core (push) Blocked by required conditions
CI Pipeline / trading-backend (push) Blocked by required conditions
CI Pipeline / trading-data-service (push) Blocked by required conditions
CI Pipeline / trading-frontend (push) Blocked by required conditions
CI Pipeline / erp-core (push) Blocked by required conditions
CI Pipeline / erp-mecanicas (push) Blocked by required conditions
CI Pipeline / gamilit-backend (push) Blocked by required conditions
CI Pipeline / gamilit-frontend (push) Blocked by required conditions
Backend: - Fix email verification and password recovery services - Fix exercise submission and student progress services Frontend: - Update missions, password, and profile API services - Fix ExerciseContentRenderer component Docs & Scripts: - Add SSL/Certbot deployment guide - Add quick deployment guide - Database scripts for testing and validations - Migration and homologation reports - Functions inventory documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
5.9 KiB
5.9 KiB
Especificacion: AdminUsersPage
Version: 1.0.0
Fecha: 2025-12-18
Ubicacion: apps/frontend/src/apps/admin/pages/AdminUsersPage.tsx
PROPOSITO
Pagina de administracion para gestionar usuarios del sistema, incluyendo CRUD completo, busqueda, filtros y acciones de suspension.
ESTRUCTURA DE PAGINA
┌─────────────────────────────────────────────────────────┐
│ HEADER │
│ [Users Icon] Gestion de Usuarios │
│ [+ Crear Usuario] │
└─────────────────────────────────────────────────────────┘
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ STATS CARDS │ │
│ │ [Total] [Activos] [Inactivos] [Estudiantes] │ │
│ │ [Profesores] [Admins] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ FILTROS │ │
│ │ [Buscar...] [Rol v] [Estado v] [Limpiar] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ TABLA │ │
│ │ Usuario | Email | Rol | Estado | Inst | Acciones│ │
│ │ ────────────────────────────────────────────── │ │
│ │ Juan... | j@... | Est | Activo | Esc1 | [...] │ │
│ │ Maria...| m@... | Prof| Activo | Esc1 | [...] │ │
│ │ ────────────────────────────────────────────── │ │
│ │ [< Prev] 1 2 3 4 5 [Next >] │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
STATS CARDS (6)
| Card | Dato | Icono |
|---|---|---|
| Total usuarios | Conteo total | Users |
| Activos | Usuarios activos | UserCheck |
| Inactivos | Usuarios inactivos | UserX |
| Estudiantes | Rol student | GraduationCap |
| Profesores | Rol teacher | BookOpen |
| Admins | Roles admin | Shield |
FILTROS
Busqueda
- Campo de texto con debounce (300ms)
- Busca en: nombre, email
- Icono de busqueda
- Boton limpiar (X)
Filtro por Rol
Opciones:
- Todos
- student
- admin_teacher
- teacher
- super_admin
Filtro por Estado
Opciones:
- Todos
- active
- inactive
- suspended
TABLA
Columnas
| Columna | Contenido | Sorteable |
|---|---|---|
| Usuario | Avatar + nombre | Si |
| Si | ||
| Rol | Badge coloreado | No |
| Estado | Icono + texto | No |
| Institucion | Nombre escuela | No |
| Ultimo acceso | Fecha formateada | Si |
| Acciones | Botones | No |
Estilos de Fila
| Estado | Estilo |
|---|---|
| active | Normal |
| inactive | Opacidad reducida |
| suspended | Fondo rojo tenue |
Badges de Rol
| Rol | Color |
|---|---|
| student | Azul |
| teacher | Verde |
| admin_teacher | Naranja |
| super_admin | Rojo |
ACCIONES POR FILA
| Accion | Icono | Condicion |
|---|---|---|
| Editar | Pencil | Siempre |
| Suspender | Ban | Si active |
| Reactivar | CheckCircle | Si suspended |
| Eliminar | Trash | Siempre (requiere confirm) |
MODALES
UserDetailModal
Proposito: Ver/editar detalles de usuario.
Campos editables:
- Nombre
- Rol
- Institucion (dropdown)
- Estado
Campos readonly:
- ID
- Fecha creacion
- Ultimo acceso
- Estadisticas de uso
ConfirmDialog
Uso: Confirmacion de acciones destructivas.
Variantes:
- Suspender usuario
- Eliminar usuario
- Reactivar usuario
HOOKS UTILIZADOS
| Hook | Proposito |
|---|---|
| useUserManagement | CRUD de usuarios |
| useInstitutions | Lista de instituciones |
PAGINACION
- Items por pagina: 10, 25, 50
- Navegacion: anterior/siguiente
- Numeros de pagina visibles: 5
- Info: "Mostrando 1-25 de 150 usuarios"
PERMISOS
| Accion | Roles Permitidos |
|---|---|
| Ver lista | admin, super_admin |
| Editar | admin, super_admin |
| Suspender | super_admin |
| Eliminar | super_admin |
| Crear | super_admin |
FEEDBACK
| Accion | Toast |
|---|---|
| Usuario actualizado | Success verde |
| Usuario suspendido | Warning naranja |
| Usuario eliminado | Success verde |
| Error | Error rojo |
REFERENCIAS
useUserManagement.ts- Hook de gestionuserManagementApi.ts- Cliente API
Ultima actualizacion: 2025-12-18