mini-erp/mini-frontend/docs/dashboard.md

Dashboard

Página de inicio del ERP (/dashboard). Muestra KPIs, accesos rápidos a las operaciones más comunes y un feed de actividad reciente, organizados en secciones con grillas de cards.

Importante: actualmente todo el contenido de Dashboard.tsx es estático/hardcodeado en el propio componente (arrays kpiCards, actionCards, newsCards, activityItems). No hay ningún fetch a api.ts ni al backend — los valores de ventas, compras, clientes e inventario son de ejemplo, no datos reales de SAP. La sección "Noticias y guías" está deshabilitada en código ({false && (...)}), por lo que no se renderiza aunque el array newsCards exista.

Árbol de Componentes

graph TB
  DASH[Dashboard.tsx]
  SEC[DashboardSection.tsx]
  GRID[DashboardGrid.tsx]
  CARD[DashboardCard.tsx]
  KPI[DashboardKpiCard.tsx]
  ACT[DashboardActionCard.tsx]
  NEWS[DashboardNewsCard.tsx]

  DASH -->|"KPI"| SEC
  DASH -->|"Accesos rápidos"| SEC
  DASH -->|"Noticias y guías (deshabilitada)"| SEC
  DASH -->|"Actividad reciente (bloque propio, sin card)"| ACTIVITY[div de actividad inline]

  SEC --> GRID
  GRID --> CARD
  CARD -->|type: kpi| KPI
  CARD -->|type: action| ACT
  CARD -->|type: news| NEWS

DashboardCard es un dispatcher: según la prop type ("kpi" | "action" | "news") delega el render en DashboardKpiCard, DashboardActionCard o DashboardNewsCard. El bloque "Actividad reciente" no usa DashboardCard: es una lista renderizada directamente en Dashboard.tsx.

Tipos de card

Card	Props principales	Comportamiento
DashboardKpiCard	title, icon (componente de lucide-react), value, subtitle, action?: {label, to}	Muestra un valor numérico/texto grande. Si tiene action, renderiza un botón que navega con useNavigate() a la ruta to.
DashboardActionCard	title, icon, to	Card clickeable completa (ícono + título) que navega a to con useNavigate(). Tiene hover que cambia el fondo a --color-primary-active.
DashboardNewsCard	image, title, description	Card con imagen de fondo (backgroundImage) + texto. Actualmente usa URLs externas de picsum.photos como placeholder. No implementada en pantalla porque su sección está deshabilitada.

Todas las cards usan variables CSS del tema (--color-surface, --color-border, --color-primary, --color-text-muted, etc.) vía style inline, no clases de Tailwind.

Archivos Clave

Archivo	Ruta	Propósito
Dashboard.tsx	src/views/	Vista principal; define los datos hardcodeados de KPIs, accesos rápidos, noticias y actividad, y arma las secciones
DashboardSection.tsx	src/components/dashboard/	Título de sección (h2) + contenedor de su contenido
DashboardGrid.tsx	src/components/dashboard/	Grid CSS responsivo (auto-fill, minmax(260px, 1fr)) para las cards
DashboardCard.tsx	src/components/dashboard/	Dispatcher que elige la card concreta según type
DashboardKpiCard.tsx	src/components/dashboard/	Card de indicador numérico con botón de acción opcional
DashboardActionCard.tsx	src/components/dashboard/	Card de acceso rápido, navega al hacer clic
DashboardNewsCard.tsx	src/components/dashboard/	Card de noticia con imagen (actualmente sin uso, sección deshabilitada)

Pendiente / a tener en cuenta

Si se decide conectar el dashboard a datos reales, haría falta: (1) reemplazar los arrays estáticos por llamadas a api.ts hacia endpoints del backend que hoy no existen para este propósito (no hay un endpoint de KPIs agregados en mini-backend), y (2) decidir si se reactiva la sección de noticias y de dónde saldría el contenido (hoy usa imágenes externas de picsum.photos, no aptas para producción).