Informe de reutilización UI — Wari
Índice de páginas
Patrones detectados por ocurrencias
| Patrón | Ocurrencias totales |
|---|---|
| Badge admin | 151 |
| Nav / Sidebar | 17 |
| Card admin | 17 |
| Glass card | 10 |
| Toolbar búsqueda | 9 |
| Tabla admin | 8 |
| Empty state | 6 |
| Page header | 6 |
| Form group | 6 |
| Section header | 3 |
Duplicaciones identificadas
Barra de búsqueda y filtros (admin)
AltaAfecta: Admin – Usuarios, Admin – Grupos, Admin – Eventos, Admin – Juegos, Admin – Auditoría, Admin – Notificaciones
Cada página de listado admin replica la misma estructura de toolbar con campo de búsqueda, botón submit y enlace "Limpiar". El código se copia literalmente en 7 templates.
Solución sugerida: Extraer a templates/admin/_toolbar.html.twig con variables action, buscar y filtros.
Tabla admin con acciones por fila
AltaAfecta: Admin – Usuarios, Admin – Grupos, Admin – Eventos, Admin – Juegos, Admin – Auditoría, Admin – Notificaciones
Estructura admin-card > admin-table > thead/tbody con fila vacía (No data) repetida en 6 templates. Solo cambian las columnas, no el esqueleto.
Solución sugerida: Macro Twig renderTable(headers, rows, emptyText) en admin/_macros.html.twig.
Cabecera de card con badges de estado
MediaAfecta: Admin – Usuarios, Admin – Grupos, Admin – Eventos, Admin – Juegos
Las páginas show de admin duplican el patrón admin-card-header + admin-card-title + admin-badge para mostrar el estado de una entidad.
Solución sugerida: Partial admin/_card_header.html.twig con variables title, status, status_label.
Glass card (eventos, grupos, invitaciones)
MediaAfecta: Dashboard, Eventos – lista, Grupos – lista
34 ocurrencias de .glass-card con variantes card-event, card-group, card-invitation. El interior cambia ligeramente pero la estructura y clases son idénticas.
Solución sugerida: Macro renderCard(type, title, meta, badge, href) o componente Twig CardComponent.
Empty state
MediaAfecta: Eventos – lista, Grupos – lista, Colección grupo, Notificaciones, Admin – Usuarios, Admin – Grupos, Admin – Eventos
13 ocurrencias de .empty-state con ícono, titular y mensaje de texto vacío, cada una escrita a mano.
Solución sugerida: Partial shared/_empty_state.html.twig con variables icon, title, message y bloque opcional actions.
Cabecera de página (user-facing)
BajaAfecta: Eventos – lista, Grupos – lista, Colección grupo, Colección personal, Notificaciones, Perfil
12 templates repiten .page-header > .page-title + .page-subtitle.
Solución sugerida: Bloque en base.html.twig o partial shared/_page_header.html.twig.
Form group (label + widget + errors)
BajaAfecta: Perfil, Grupos – nuevo, Eventos – nuevo, Admin – Config SMTP
46 ocurrencias de la tripla form_label / form_widget / form_errors con clases form-label / form-control.
Solución sugerida: Form theme Twig o macro formField(form, field) centralizado.
Pantallazos por página
Cada página muestra la vista limpia y la vista con los patrones resaltados mediante bordes de color.
Dashboard /
Eventos – lista /eventos
Grupos – lista /grupos
Colección grupo /coleccion
Colección personal /coleccion/personal
Notificaciones /notificaciones
Perfil /perfil
Admin – Dashboard /admin
Admin – Usuarios /admin/usuarios
Admin – Grupos /admin/grupos
Admin – Eventos /admin/eventos
Admin – Juegos /admin/juegos
Admin – Auditoría /admin/auditoria
Admin – Estadísticas /admin/estadisticas
Admin – Notificaciones /admin/notificaciones
Admin – Integraciones /admin/integraciones
Admin – Consola /admin/consola
