Listas, fichas y formularios
Composición y scroll que debes conservar al adaptar una pantalla.
Contenedor de pantalla
PimiaScreenShell aplica flex h-full min-h-0 flex-col gap-5 p-6.
El shell web entrega el área disponible; cada vista se ocupa de su scroll.
| Patrón | Composición |
|---|---|
| Ficha o portada | PimiaScreenShell con scroll="documento" |
| Índice con tabla | PimiaScreenShell con scroll="panel" y PimiaTablePanel |
| Editor cuyo elemento raíz es form | PIMIA_SCREEN_SHELL + PIMIA_SCREEN_SCROLL |
No quites min-h-0 de la cadena flex: puede impedir que la tabla encoja y
dejar contenido inaccesible. PimiaTablePanel hace scroll en el cuerpo y
mantiene el pie de paginación fuera de ese scroll.
Cabecera y listas
PimiaPageHeader: título, descripción, regreso, metadatos y acción principal.PimiaFilterBar: búsqueda y filtros de la pantalla.PimiaStatCards: cifras de resumen.PimiaTablePanel: cuerpo desplazable, cabecera opcional y pie.PimiaPagination: navegación entre páginas.PimiaSortableHead: cabecera para ordenación donde el recurso la soporta.
Los nombres de los componentes no garantizan que deban usarse en todas las pantallas. En clientes no se ofrece un eje de estado ni ordenación de columnas sin soporte comprobado del recurso. Ordenar solo las filas de una página no equivale a ordenar todo el conjunto del servidor.
Fichas
Mantén los identificadores de la URL, las relaciones y sus enlaces. Separa los
datos principales de las acciones y de las regiones relacionadas. Para importes
y estados, reutiliza PimiaAmountCell, PimiaStatusBadge y los helpers del
recurso, en lugar de reconstruir su semántica a partir del texto visible.
Formularios
El patrón habitual separa cuatro pasos:
- Crear o sembrar el estado del formulario desde el recurso.
- Mostrar controles y validación local.
- Convertir el estado a un borrador de API mediante un helper.
- Guardar con una mutation y actualizar las consultas afectadas.
Label debe seguir asociado al control. Conserva value, onChange,
onValueChange, disabled y el envío del formulario al mover un campo.
Comprueba los selects con valores vacíos: un centinela visual no debe llegar
como identificador al servidor.
Estados
Los componentes de PimiaStates.tsx distinguen no conectado, error, vacío y
skeletons. Una consulta fallida no debe convertirse en una lista vacía ni un
importe desconocido en cero. Durante el guardado conserva el bloqueo contra
doble envío y el mensaje de resultado.