workspace/projects/gamilit/docs/frontend/admin/pages/AdminUsersPage-Specification.md
rckrdmrd 289c5a4ee5
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
Gamilit: Backend fixes, frontend API updates, deployment guides and validations
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>
2025-12-18 23:42:48 -06:00

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
Email Email 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
  • Email
  • 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 gestion
  • userManagementApi.ts - Cliente API

Ultima actualizacion: 2025-12-18