Dashboard KPIs

Visualiza metricas clave de negocio en tarjetas y graficos.

Metricas mostradas

Metrica	Descripcion	Calculo
Total Ingresos	Suma de facturas emitidas	SUM(invoices.total_amount) WHERE status != ‘cancelled’
Total Gastos	Suma de gastos registrados	SUM(expenses.amount)
Beneficio Bruto	Diferencia ingresos - gastos	Ingresos - Gastos
Facturas Pendientes	Facturas sin cobrar	COUNT(invoices) WHERE status = ‘sent’
Facturas Vencidas	Facturas fuera de plazo	COUNT(invoices) WHERE status = ‘sent’ AND due_date < hoy

Graficos incluidos

Grafico de linea: Evolucion mensual de ingresos vs gastos.

Grafico de barras: Comparativa trimestral.

Grafico circular: Distribucion de ingresos por cliente (Top 5).

Pasos

1. Accede a la pestana “KPIs” en la pagina de Informes.
2. Las tarjetas se cargan automaticamente con datos del ano actual.
3. Usa los filtros de periodo para ver otros rangos.
4. Los graficos se actualizan en tiempo real.

Detalles tecnicos — Dashboard KPIs

Detalles técnicos

Componente: src/features/accounting/sub-modules/reporting/components/dashboard/KPIDashboard.tsx

Bibliotecas de graficos: recharts o chart.js

Ejemplo de query:

// Metricas globales
const { data: invoices } = await supabase
  .from("invoices")
  .select("total_amount, issue_date")
  .eq("business_id", businessId)
  .gte("issue_date", dateFrom)
  .lte("issue_date", dateTo)
  .neq("status", "cancelled");

const totalInvoiced = invoices?.reduce((sum, inv) => sum + inv.total_amount, 0) || 0;

const { data: expenses } = await supabase
  .from("expenses")
  .select("amount")
  .eq("business_id", businessId)
  .gte("expense_date", dateFrom)
  .lte("expense_date", dateTo);

const totalExpenses = expenses?.reduce((sum, exp) => sum + exp.amount, 0) || 0;
const grossMargin = totalInvoiced - totalExpenses;

---