Mejoras al Listado de Transacciones — filtros de fecha, paginado, orden, columna de creación

Date: 2026-07-25 Status: 🟢 Mejora funcional (no bloqueante) — 5 puntos concretos

1. Filtro de fecha "desde / hasta"

Agregar dos selectores de fecha a la barra de filtros existente (junto a Estado / País / PDV / Buscar), acordes al mismo estilo. Filtran por la columna que corresponda (ver punto 2 — filtrar por fecha de creación, no por última actualización, salvo que se decida ofrecer ambas).

API: agregar from y to (formato YYYY-MM-DD) a GET /api/transacciones. Si se pasan ambos, filtrar created_at BETWEEN from AND to (inclusive, considerar zona horaria de Guatemala al armar el rango). Combinable con el resto de los filtros existentes (estado, país, PDV, búsqueda).

2. Nueva columna: Fecha de creación

Hoy la tabla muestra "Última actualización" pero no cuándo se creó la transacción (cuándo la ingesta la trajo de Soterex). Agregar la columna "Creada" (o "Fecha de creación") mostrando transactions.created_at, formateada igual que la columna de última actualización que ya existe. El dato ya existe en la base (es el created_at estándar del modelo) — es un cambio de serialización en el endpoint + una columna nueva en la tabla del frontend, no requiere migración.

3. Paginado

El listado no puede seguir devolviendo todo de una — agregar paginado real:

API: GET /api/transacciones acepta page y per_page (default sugerido: 25), devuelve la respuesta paginada estándar de Laravel (data, current_page, last_page, total, etc.) — usar el paginator nativo de Eloquent, no armarlo a mano.

Frontend: componente de paginado debajo de la tabla (Naive UI tiene <n-pagination> ya disponible, coherente con el resto del sistema de diseño). Al cambiar de página o de cualquier filtro, resetear a la página 1.

4. Ordenamiento ascendente/descendente en todas las columnas

Cada header de columna (MTCN, Beneficiario, Estado, País, PDV, Monto, Comisión, Fecha de creación, Última actualización) tiene que poder ordenar asc/desc al hacer click, con una flechita indicando el orden activo (patrón estándar de tabla ordenable).

API: agregar sort (nombre de columna) y direction (asc/desc) a GET /api/transacciones. Importante: whitelist explícita de columnas permitidas para sort en el backend (no pasar el valor directo a un orderBy() sin validar — es una columna de entrada del usuario, hay que evitar cualquier vector de inyección aunque sea vía Eloquent).

Frontend: al hacer click en un header, actualizar sort/direction y volver a pedir la página 1 con esos parámetros.

5. Bonus — el ítem "Transacciones" del sidebar debe quedar activo en el Detalle

Al entrar al detalle de una transacción (/transacciones/:id o la ruta que sea), el ítem "Transacciones" del sidebar pierde el estado activo/resaltado. Revisar:

• Si la ruta de detalle está anidada bajo el mismo prefijo /transacciones en el router, el active-class de <router-link to="/transacciones"> debería mantenerse solo con matching no exacto (comportamiento default de Vue Router) — confirmar que el <router-link> del sidebar no tenga exact seteado accidentalmente.
• Si la ruta de detalle vive en otro path (por ejemplo /transaccion/:id singular, o fuera del árbol de /transacciones), hay que resolverlo por nombre de ruta en vez de por prefijo de path — el ítem del sidebar se marca activo si route.name está en una lista de nombres asociados a esa sección (ej: ['transacciones', 'transaccion-detalle']), no solo por coincidencia de URL.

Prioridad relativa

Ninguno de estos 5 puntos es bloqueante para seguir con M2/M3/M4 — es una mejora de calidad de vida sobre un listado que ya funciona. Se puede intercalar entre módulos, no hace falta pausar nada para esto.