F-147 — Architect

Feature

Admin: reporting shell and global filters.

Background

F-143/F-146 implementaron los endpoints de reporting backend (filters schema, summary, sales). F-147 expone esta funcionalidad en el frontend admin con navegación, shell de dashboard, filtros globales reusables y estados de datos explícitos.

Objetivo

Añadir navegación "Reporting" al sidebar del admin
Crear GET /reporting (shell + filtro global de canal/día)
Componentes reusables: DateRangePicker, ReportingFilters, AvailabilityBadge, KpiCard
Persistencia de filtros en URL (Next.js searchParams)
Estados explícitos: loading skeleton, empty state, error state

Diseño

Navegación

Añadir a NAV_ITEMS:

{ href: '/reporting', label: 'Reporting', icon: '📊', permission: 'reporting.read' }

Y añadir reporting.read a Permission type + can().

Página principal `/reporting`

Layout de 2 paneles: filtros (sidebar izquierdo, colapsable) + contenido (gráficos/resumen)
Por defecto muestra GET /reporting/summary con rango de los últimos 30 días
Filtros: canal (ecommerce/pos/todos), rango de fechas, tienda, comparador

Componentes

DateRangePicker: selector de rango de fechas con presets (7d, 30d, 90d, mes actual, mes anterior)
ReportingFilters: formulario con todos los filtros del schema de F-143
AvailabilityBadge: muestra "✅ disponible" / "❌ no disponible" para cada métrica
KpiCard: tarjeta con KPI (número, label, comparación con período anterior, badge de disponibilidad)

API calls

lib/reporting-client.ts con:

fetchFilterSchema() → GET /api/reporting/filters/schema
fetchSummary(params) → GET /api/reporting/summary
fetchSales(params) → GET /api/reporting/sales

Estados de datos

loading: skeleton spinner centrado
empty: mensaje "No hay datos para este período" con icono
error: mensaje de error con botón reintentar
dataAvailability: badge junto a cada métrica

URL persistence

Los filtros se serializan en searchParams de Next.js: ?from=&to=&channel=&storeId=&compare=&groupBy=. Al recargar la página se mantienen.

Acceptance Criteria

AC1: Navegación "Reporting" visible en sidebar para admin/editor. AC2: Página /reporting carga con filtro de rango de fechas y canal por defecto (últimos 30 días, todos los canales). AC3: Filtros se persisten en URL (al recargar mantienen los valores). AC4: Estado loading: spinner/skeleton mientras carga. AC5: Estado empty: mensaje cuando no hay datos. AC6: Estado error: mensaje con botón reintentar. AC7: Cada métrica muestra AvailabilityBadge (disponible/no disponible). AC8: tsc 0, verify.sh verde.

2.7 KiB Raw Blame History