admin ui/ux · v1.0 · ago 2026
Propuesta · producto

Click es peek, el peek abre página.

El admin ya tiene la paleta (admin-restyle) y los componentes (componentes-ui). Lo que no tiene es una regla de navegación: hoy "ver una entidad" se responde de cuatro maneras distintas según la ruta, y el login recibe al equipo con una página en blanco. Esta propuesta cierra las dos cosas: un login Aurora sobre noche, y un patrón único — peek para leer rápido, página para trabajar — asignado ruta por ruta a las 18 rutas del panel.

Alcance
Login + navegación
Regla
Peek → página
Rutas auditadas
18 de 18
Base
admin-restyle · ACP-113
01Cuatro respuestas a la misma pregunta
auditado en apps/admin

Las 11 entidades CRUD comparten esqueleto — tabla, filtros, botón crear, sheet lateral de edición (ResponsiveFormDialog) — pero la interacción central del panel, "quiero ver esta entidad", está fracturada. La fila casi nunca es clickeable: hay que encontrar el menú "⋯". Y cuando por fin llegas, cada ruta contesta distinto:

Entidad"Ver" hoyEl problema
PacientesPágina de detalle con 5 tabsLa única con página. El modelo correcto — y nadie más lo sigue.
DoctoresNo existe — solo editar o eliminarLa entidad estrella del negocio no se puede ver, solo abrir su formulario de 445 líneas.
Citas"Ver detalle" está deshabilitadoUn botón muerto en producción desde hace meses.
ClínicasClick en fila abre el formulario de ediciónEl sheet más denso del panel: foto, dirección, horarios por día y un dialog anidado — 565 líneas en un drawer.
ComunicacionesSheet de solo lecturaEl único peek de verdad — pero nadie más lo tiene.
Fractura 2 · el gesto

La fila no responde

Solo clinics y la cola de revisión de doctores reaccionan al click en la fila. En el resto, la acción vive escondida en el menú "⋯" — el gesto más natural de una tabla no hace nada en 9 de 11 rutas.

Fractura 3 · la densidad

Drawers que ya no caben

El drawer nació para formularios cortos y hoy carga fichas completas: clinics (565 líneas), la edición de doctors (445). Sin URL, sin breadcrumb, sin tabs — todo apretado en 512 píxeles de ancho.

Menudencias que la implementación arrastra: la mitad de las rutas sincroniza filtros a la URL (nuqs) y la otra mitad los pierde al recargar; /users es un placeholder "en construcción" visible en el sidebar; el estado de los dialogs vive a veces en la página y a veces dentro de la celda de la tabla.

02Una sola regla: peek y página
patrón notion · adaptado

En vez de cuatro comportamientos, uno: click en la fila abre un peek — un drawer de lectura rápida, no el formulario — en todas las tablas del panel. Desde el peek, "abrir como página" lleva a la ruta real de la entidad; ⌘click en la fila va directo. El drawer deja de ser el formulario-de-todo y pasa a ser lo que es en Notion: una ventana para mirar sin perder la lista, con salida a página cuando toca trabajar.

1 · la fila
Click en cualquier tabla

Toda la fila es clickeable, con hover visible. El menú "⋯" queda para acciones rápidas (editar, eliminar).

2 · el peek
Lectura rápida, sin salir

Identidad, estado y los datos que responden el 80% de las consultas. Esc cierra, ↑↓ navega entre filas.

3 · la página
URL real, tabs, trabajo

/doctors/[id] como ya existe /patients/[id]. Compartible, con breadcrumb y espacio para crecer.

Quién recibe qué. Página completa solo donde la densidad la justifica: las cuatro entidades núcleo. Los catálogos livianos — un idioma, una especialidad, un motivo de visita — se quedan en drawer: para "nombre + estado", una página sería ceremonia vacía. Y los flujos que ya funcionan no se tocan: el wizard de crear cita sigue siendo modal (es un flujo, no una ficha) y la cola de revisión SACS conserva su drawer ancho (es una cola de trabajo).

La matriz completa

La sección 06 asigna las 18 rutas una a una: qué hace el click, quién tiene peek, quién tiene página. Esa tabla es el contrato de implementación.

03El login Aurora
/(auth)/login

Hoy el login es una página en blanco con el formulario flotando. La propuesta lo lleva a noche completo con --grad-hero — el mismo degradado radial del manual — y dos auroras de la paleta (menta arriba, petroleo abajo) que derivan lentísimo, 12 segundos por ciclo, casi imperceptible: la pantalla está viva sin moverse. El isotipo, gigante y al 7%, sangra por la esquina — marca de agua, no decoración. El formulario vive en una lámina noche-soft translúcida de radio 20 (el radio de lámina de ACP-113), campos oscuros con foco menta, y un botón pill menta con tinta noche. Al enviar, la aurora pulsa una vez. Con prefers-reduced-motion, todo queda quieto: el degradado solo.

propuestalogin · escritorio · foco en contraseña

Detalles que importan: el foco del campo activo es borde menta + halo al 18% — visible sobre noche sin gritar. El botón menta con tinta noche da 8.9:1 de contraste. La aurora se dibuja con dos radiales de la paleta (menta .34, petroleo .38) difuminados — cero colores nuevos. El wordmark es el vector del manual, nunca texto.

04La lista y su peek
/doctors · arquetipo

Doctores como ejemplo — la ruta con más filtros y la asimetría más grave (hoy ni siquiera tiene "ver"). La fila entera responde al click y lo dice con el hover. El peek abre a la derecha con la identidad, el estado SACS y los datos de consulta frecuente; arriba a la izquierda, "abrir como página"; abajo, editar — que ahí sí abre el formulario de siempre. La lista sigue visible detrás: mirar tres doctores seguidos son tres clicks, no tres viajes.

propuestatabla de doctores · peek abierto

Nada de mayúsculas gritadas: los encabezados de columna van en sentence case, sin letter-spacing — la voz editorial de Amedi también aplica dentro del producto. El peek reusa el Sheet de ACP-113 (radio 20, overlay noche) con un cuerpo de solo lectura; el scrim acá es más suave (.38) que el de un dialog porque la lista debe seguir legible detrás.

05La página de detalle
/doctors/[id] · nueva ruta

El mismo doctor, ya como ruta real — el patrón que /patients/[id] estrenó y que doctors, clinics y appointments heredan: hero de identidad + tabs + cards editables. Acá cabe lo que el drawer nunca pudo cargar: la agenda, los documentos SACS, la actividad. El breadcrumb resuelve el nombre (como ya hace con pacientes) y la URL se comparte en un mensaje de equipo sin explicar nada.

propuestaficha del doctor · tab resumen

Clinics hereda esto tal cual — su formulario de 565 líneas se reparte en tabs (Información, Horarios, Ubicación, Doctores) y el drawer queda como peek. Appointments revive su "ver detalle" con esta misma plantilla en versión compacta: la cita, su paciente, su doctor, su historial de estados.

06Los catálogos se quedan en drawer
y la matriz de las 18 rutas

Para un idioma, una especialidad o un motivo de visita — dos campos y un switch — el peek y el formulario son la misma cosa: el click abre directamente el drawer de edición, como hoy, pero con el lenguaje de ACP-113 y la fila clickeable. Sin página, sin ceremonia.

propuestadrawer de catálogo · specialties

La matriz · 18 rutas, un contrato

RutaClick en filaDetalleNota
/doctorsPeekPágina nueva/doctors/[id] — hero + Resumen · Agenda · Documentos · Actividad.
/patientsPeekPágina (existe)Gana el peek; su página de 5 tabs ya es el modelo.
/clinicsPeekPágina nuevaEl sheet de 565 líneas se reparte en tabs; el click deja de abrir la edición.
/appointmentsPeekPágina nuevaRevive el "ver detalle" muerto. El wizard modal de crear no se toca.
/doctors/reviewDrawer anchoNo aplicaCola de trabajo: su drawer de 720px es el patrón correcto. Solo se retinta.
/communicationsPeek (existe)No aplicaSu sheet de solo lectura ya es un peek — se alinea al lenguaje y listo.
/admins · /profiles · /rolesDrawer de ediciónNo aplicaFila clickeable → drawer. Roles conserva su matriz de permisos dentro.
/announcementsDrawer de ediciónNo aplicaDenso pero efímero — no amerita URL propia.
/specialties · /languages · /visit-reasonsDrawer de ediciónNo aplicaCatálogos de dos campos: click = editar, como la maqueta de arriba.
/notificationsNavega al destinoNo aplicaCada notificación ya lleva a su entidad — se queda.
/usersSale del sidebar hasta que exista. Un placeholder no es una ruta.
/ · /accountNo aplicaNo aplicaDashboard y cuenta: fuera del alcance de esta propuesta.

Regla de asignación: página completa solo si la entidad acumula historia (citas, documentos, actividad) o su ficha excede lo que 512px de drawer muestran sin scroll infinito. Todo lo demás, drawer. Ante la duda, drawer — promover a página después es barato; degradar una página, no.

07Cómo se construye
4 fases · sin big bang
Fase 1 · el login

Aurora en /(auth)

Solo layout.tsx y estilos: el fondo, las auroras, la lámina. El formulario RHF+Zod actual no se toca. Es la fase más visible y la más barata.

Fase 2 · el peek

Un componente, todas las tablas

EntityPeek sobre el Sheet de ACP-113 + onRowClick en AdminDataTable (⌘click navega). Entra ruta por ruta, empezando por doctors.

Fase 3 · las páginas

doctors, clinics, appointments

Clonan el patrón de /patients/[id] (hero + tabs + EditableCard). Clinics migra su formulario a tabs; appointments estrena detalle compacto.

Fase 4 · consistencia

Las menudencias

nuqs en las 5 rutas que no lo tienen, estado de dialogs siempre en la página, /users fuera del sidebar, sentence case en encabezados de tabla.

Nada breaking

Cada fase entrega sola y ninguna rompe la anterior: el peek convive con el menú "⋯", las páginas nuevas son rutas nuevas, y los drawers de edición actuales siguen siendo el destino de "Editar".

El panel se usa 8 horas al día: que cada click responda.

Un login que recibe con la marca encendida, filas que se abren al tocarlas, un peek para mirar y una página para trabajar. La misma regla en las 18 rutas — y ninguna pregunta sin respuesta.

Se decide aquí

Login Aurora + patrón peek→página + la matriz de 18 rutas.

Ya decidido antes

admin-restyle (paleta) y ACP-113 (componentes) — esta pieza los asume.

Siguiente paso

Confirmar → design-ship publica y arma el proyecto → goal-phases lo vuelve ejecutable.