Hoy Fletes y Envíos son una pared de cards: con treinta fletes, diez pantallas de scroll para encontrar uno. La propuesta pone una sola barra —búsqueda, chips de estatus, filtros y un control de dos íconos— que sirve igual a la lista y a la galería. La elección se recuerda en el dispositivo; los filtros siguen viviendo en la URL.
Consulta y gestiona tus fletes activos y accede a tu historial.
| Código | Tipo | Ruta | Estatus | Envíos | Tarifa | Pago | Creado | |
|---|---|---|---|---|---|---|---|---|
| MG-FL-2481 | Marítimo | GuangzhouLa Guaira | En tránsito | 3 | $1.240,00 | Pagada | 12/08/2026 | |
| MG-FL-2477 | Aéreo | ShenzhenCaracas | En almacén destino | 1 | $312,50 | Pendiente | 09/08/2026 | |
| MG-FL-2469 | Marítimo | YiwuLa Guaira | Listo para retiro | 5 | $2.980,00 | Parcial | 28/07/2026 | |
| MG-FL-2452 | Aéreo | GuangzhouCaracas | Entregado | 2 | $540,00Promo | Pagada | 19/07/2026 | |
| MG-FL-2440 | Marítimo | GuangzhouPuerto Cabello | Demorado | 4 | $1.875,00 | Parcial | 06/07/2026 | |
| MG-FL-2431 | Aéreo | ShenzhenCaracas | Entregado | 1 | $198,00 | Pagada | 30/06/2026 |
Cada flete es una card de 384 px con nueve datos y un botón «Ver detalle». Con cuatro o cinco fletes se lee bien; con treinta, comparar tarifas o encontrar el que está demorado es bajar y subir. Los cuatro filtros de arriba son selects con etiqueta: ocupan una fila entera y no dicen cuántos fletes hay detrás de cada opción.
La barra no sabe en qué vista está. Lee y escribe los mismos filtros de la URL que hoy
(useQueryFilters), y el control de la derecha solo cambia cómo se pinta lo que ya llegó.
El mismo campo de hoy (debounce 300 ms, search en la URL), con / para enfocarlo desde el teclado. Sin etiqueta encima: el ícono y el placeholder ya lo dicen.
Atajos del filtro status. Agrupan los nueve estatus en cuatro que el cliente entiende: Todos · En tránsito · Por pagar · Entregados. El conteo viene del mismo endpoint (fase 3).
Tipo de envío y estatus de pago (Fletes) o aprobación (Envíos) viven en un menú. La insignia dice cuántos hay aplicados; la línea de resumen debajo los nombra.
Lista y galería, 44 × 34 px cada uno, el activo se levanta en blanco. No pide datos: la misma página de useInfiniteFreights se pinta distinto. Guarda la elección en localStorage.
Cabecera en hueso, hairlines entre filas, sin zebra. El código en Neue Haas 500, las cifras
tabulares para que las tarifas y las fechas queden en columna, y las mismas pills del
Badge que ya usa la card, con punto y texto: el color nunca va solo. La fila entera lleva al
detalle; el chevrón de la derecha solo lo anuncia.
Paquetes que vienen en camino o ya llegaron a tu casillero.
| Tracking | Tipo | Ruta | Estatus | Aprobación | Creado | |
|---|---|---|---|---|---|---|
| SF1234567890Envío MG-EN-90318 | Aéreo | ShenzhenCaracas | En almacén origen | Aprobado | 20 ago 2026 | |
| YT2026081200Envío MG-EN-90302 | Marítimo | GuangzhouLa Guaira | En tránsito | Aprobado | 12 ago 2026 | |
| MG-EN-90311Sin tracking aún | Aéreo | GuangzhouCaracas | Registrado | Por aprobar | 10 ago 2026 | |
| JD00987654321Envío MG-EN-90270 | Marítimo | YiwuLa Guaira | Listo para retiro | Aprobado | 28 jul 2026 |
El código (o el tracking del proveedor, como en la card) es la única celda en display. Debajo, en 10 px, el código Mogos cuando el tracking protagoniza.
Origen → destino con la flecha en gris: dos datos de la card se vuelven uno, y se lee como viaje.
Las cabeceras con flecha ordenan (sortBy ya existe en el API de fletes). Por defecto, más reciente primero, como hoy. Fase 4.
Envíos, tarifa y fecha alineados a la derecha con cifras tabulares: comparar treinta tarifas es bajar la vista por una línea.
El sentinel de hoy sigue al pie; el pie de tabla dice cuántos se ven de cuántos hay. Los esqueletos son filas, no cards.
La galería se queda como la vista por defecto: es lo que el cliente conoce. Cambia solo el contenedor
—de flex-wrap a una rejilla de tres— para que las cards no dejen huecos a la derecha y las
columnas queden alineadas con la barra. La card no se toca.
Consulta y gestiona tus fletes activos y accede a tu historial.
La card se muestra resumida en la maqueta; en el producto sigue siendo FreightCard tal cual, con corredor, promo y estatus de pago.
Dos memorias con dos dueños. Los filtros son parte de lo que ves y quieres compartir o volver atrás: siguen en la URL. La vista es un gusto de pantalla: vive en el dispositivo y no ensucia el enlace.
Búsqueda, estatus, tipo, pago o aprobación viajan como query. Un enlace pegado en WhatsApp abre exactamente lo que el otro estaba viendo; el botón atrás deshace un filtro.
/account/freights?status=IN_TRANSIT&shippingType=AIR · lo lee useQueryFilters · lo consume useInfiniteFreights
Una clave por listado. Se lee al montar (con la galería como valor de fábrica) y se escribe al tocar el control. Sin clave, sin cuenta, sin migración.
localStorage
mogos:view:fletes = "list"
mogos:view:envios = "gallery"
· useViewMode('fletes') → ['list' | 'gallery', set]
· SSR: primer render en galería, sin salto
Un hook de veinte líneas. En el primer render del servidor no existe localStorage: se pinta la galería y se corrige antes de que el usuario la vea (useSyncExternalStore), sin parpadeo de layout.
Una tabla de ocho columnas a 390 px es scroll horizontal y texto cortado. En el teléfono el control no existe: la barra se reduce a búsqueda y chips, y la lista son las cards de hoy a una columna. La preferencia guardada en el escritorio no se aplica aquí.
Búsqueda arriba, chips deslizables debajo con el desvanecido al borde. «Filtros» pasa a un bottom sheet cuando la fase 3 lo traiga.
Las mismas de hoy. No hay «lista» que elegir porque la card ya es la fila del teléfono.
La alternativa es una fila compacta —código, ruta, pill— no una tabla. Queda documentada, no en el alcance.
Lo que quedó aprobado, por qué, y la alternativa que se descartó.
| Decisión | Por qué | Alternativa descartada |
|---|---|---|
| 01Alcance: Fletes y Envíos | Son los dos listados que crecen con el tiempo y comparten patrón (useQueryFilters + scroll infinito). Un solo componente de tabla sirve a los dos. | |
| 02Las dos vistas conviven siempre | Ni la lista reemplaza a la galería ni al revés. La barra es una y no cambia al alternar; solo cambia el render. | |
| 03Solo la vista va a localStorage | Es un gusto de pantalla, por listado y por dispositivo. Los filtros siguen en la URL: se comparten y se deshacen con atrás. | |
| 04Default = galería | Continuidad: nadie abre la app y encuentra otra cosa. La lista es una elección, y una vez tomada se respeta. | |
| 05Control segmentado de dos íconos | Un clic, sin texto ni menú, a la derecha de la barra, a 40 px como todo lo demás. Con aria-pressed y tooltip. | |
| 06Cambiar de vista no pide datos | Las dos vistas consumen las mismas páginas de useInfiniteFreights; el toggle es puro render. | |
| 07Chips de estatus con conteo | Cuatro grupos que el cliente entiende, sobre el mismo filtro status. El conteo evita filtrar a ciegas. | |
| 08Móvil sin control | A 390 px una tabla es scroll horizontal. La card ya es la fila del teléfono. | |
| 09Sin sincronizar al servidor | Cero migraciones. Si un día se quiere «mi vista en todos mis dispositivos», es un campo en UserPreference, no un rediseño. |
useInfiniteFreights / useInfiniteOrders — las páginas que ya llegan.useQueryFilters — la URL como estado de filtros.InfiniteScrollSentinel — el pie que carga más.sortBy en freight-query.dto.ts — el API ya ordena.Badge con sus variantes por estatus (freight.constants.ts, order.constants.ts).FreightCard / ShipmentCard — intactas, en rejilla.PageFrame — título, migas y acciones.MobileSubNav — Fletes / Mis envíos en el teléfono.useViewMode(key) — lee y escribe mogos:view:{key}, SSR-safe.ViewToggle — el control segmentado, con aria-pressed.ListTable — tabla base (cabecera, fila, pie, esqueleto); FreightsTable y ShipmentsTable le pasan columnas.ListToolbar — búsqueda · chips · Filtros · toggle (fase 3).useViewMode, ViewToggle a la derecha de los filtros actuales, ListTable + FreightsTable con las ocho columnas. Los filtros de hoy se quedan como están. Se puede usar al final de la fase.
ShipmentsTable sobre la misma tabla base, con tracking del proveedor como columna manda y el código Mogos debajo. Clave mogos:view:envios.
ListToolbar: búsqueda con atajo, chips de estatus con conteo (un endpoint pequeño de conteos por grupo o un campo en la respuesta paginada), menú «Filtros» con insignia. Bottom sheet en móvil.
Exponer sortBy/sortOrder en PaginationParams y en la URL; cabeceras clicables en tarifa, fecha y estatus. Envíos necesita el mismo parámetro en su DTO.
Cinco cosas que suelen venir pegadas a «una tabla» y quedan fuera, con la razón.
Treinta fletes en pantalla y media, la tarifa alineada en columna, el estatus a un chip de distancia — o la galería de siempre. Cero migraciones, tres piezas pequeñas.