# DI-006: Diseño de Componentes UI **Proyecto:** Sistema de Registro de Estudiantes **Fecha:** 2026-01-07 --- ## 1. Mapa de Pantallas ``` ┌──────────────────────────────────────────────────────────────┐ │ APP LAYOUT │ ├──────────────────────────────────────────────────────────────┤ │ [Logo] Sistema de Estudiantes [Estudiantes] [Mat] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ └──────────────────────────────────────────────────────────────┘ Rutas: ├── /students → Lista de estudiantes ├── /students/new → Formulario crear ├── /students/:id/edit → Formulario editar ├── /enrollment/:id → Inscripción de materias └── /classmates/:id → Compañeros de clase ``` --- ## 2. Wireframes ### 2.1 Lista de Estudiantes (`/students`) ``` ┌─────────────────────────────────────────────────────────────┐ │ ESTUDIANTES [+ Nuevo Estudiante] │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────────────────┐ │ │ │ 🔍 Buscar estudiante... │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ NOMBRE │ EMAIL │ CRÉDITOS │ ACCIONES│ │ │ ├───────────────────────────────────────────────────────┤ │ │ │ Juan Pérez │ juan@email.com │ 6/9 │ ✏️ 🗑️ 📚 │ │ │ │ María García │ maria@email.com │ 9/9 │ ✏️ 🗑️ 📚 │ │ │ │ Carlos López │ carlos@mail.com │ 3/9 │ ✏️ 🗑️ 📚 │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ [← Anterior] [Siguiente →] │ └─────────────────────────────────────────────────────────────┘ Leyenda: ✏️ Editar 🗑️ Eliminar 📚 Inscripción ``` ### 2.2 Formulario Estudiante (`/students/new`) ``` ┌─────────────────────────────────────────────────────────────┐ │ ← Volver NUEVO ESTUDIANTE │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Nombre * │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ Juan Pérez │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Email * │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ juan@email.com │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ ⚠️ Este email ya está registrado (error ejemplo) │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ [Cancelar] [Guardar] │ └─────────────────────────────────────────────────────────────┘ ``` ### 2.3 Inscripción de Materias (`/enrollment/:id`) ``` ┌─────────────────────────────────────────────────────────────┐ │ ← Volver INSCRIPCIÓN: Juan Pérez │ ├─────────────────────────────────────────────────────────────┤ │ Créditos: ████████░░ 6/9 Materias: 2/3 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ MIS MATERIAS INSCRITAS │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ ✓ Física I │ Dra. Martínez │ [Cancelar] │ │ │ │ ✓ Programación I │ Dr. López │ [Cancelar] │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ MATERIAS DISPONIBLES │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ ○ Matemáticas I │ Dr. García │ [Inscribir] │ │ │ │ ○ Matemáticas II │ Dr. García │ [Inscribir] │ │ │ │ ○ Física II │ Dra. Martínez │ ⚠️ Mismo prof │ │ │ │ ○ Programación II │ Dr. López │ ⚠️ Mismo prof │ │ │ │ ○ Base de Datos I │ Dra. Rodríguez │ [Inscribir] │ │ │ │ ... │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ [Ver Compañeros de Clase] │ └─────────────────────────────────────────────────────────────┘ ``` ### 2.4 Compañeros de Clase (`/classmates/:id`) ``` ┌─────────────────────────────────────────────────────────────┐ │ ← Volver MIS COMPAÑEROS: Juan Pérez │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 📚 FÍSICA I (Dra. Martínez) │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ • María García │ │ │ │ • Carlos López │ │ │ │ • Ana Rodríguez │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ 💻 PROGRAMACIÓN I (Dr. López) │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ • Pedro Sánchez │ │ │ │ • Laura Torres │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 3. Componentes Reutilizables | Componente | Descripción | Props | |------------|-------------|-------| | `ConfirmDialog` | Modal de confirmación | title, message, onConfirm | | `LoadingSpinner` | Indicador de carga | size, color | | `ErrorAlert` | Mensaje de error | message, dismissible | | `CreditsBadge` | Badge de créditos | current, max | | `SubjectCard` | Card de materia | subject, actions | --- ## 4. Estados de UI | Estado | Visual | |--------|--------| | Loading | Skeleton / Spinner | | Empty | Ilustración + mensaje | | Error | Alert rojo + retry | | Success | Toast verde | --- ## 5. Responsive Breakpoints | Breakpoint | Comportamiento | |------------|----------------| | Mobile (<600px) | Cards apiladas, menú hamburguesa | | Tablet (600-960px) | Grid 2 columnas | | Desktop (>960px) | Tabla completa, sidebar |