Admin

Estado: Beta

Número del panel

Las tarjetas del panel del admin con el contrato de un buen KPI: etiqueta, valor compacto, cambio con flecha y texto contra un periodo con nombre (el color dice si es bueno según good:), y una tendencia mínima con tooltip.

Ingresos este mes

$12,150

  • abr: $8,200
  • may: $9,100
  • jun: $8,700
  • jul: $10,400
  • ago: $9,800
  • sep: $11,200
  • oct: $12,150

subió 8.4% vs. mes pasado

app/views/… (la demo de arriba)

<div class="@container w-full max-w-3xl">
  <div class="grid gap-4 @xl:grid-cols-3">
    <%= render Ui::StatCardComponent.new(label: "Ingresos este mes", value: 12_150, format: :currency, delta: 8.4, period: "vs. mes pasado",
                                         trend: [ 8200, 9100, 8700, 10_400, 9800, 11_200, 12_150 ],
                                         trend_labels: %w[abr may jun jul ago sep oct]) %>
    <%= render Ui::StatCardComponent.new(label: "Reservas hoy", value: 32, delta: 12, period: "vs. domingo pasado", live: true, class: "hidden @xl:flex") %>
    <%= render Ui::StatCardComponent.new(label: "Cancelaciones tardías", value: 4, delta: -20, period: "vs. semana pasada", good: :down,
                                         trend: [ 7, 6, 8, 5, 5, 4 ], trend_labels: [ "hace 5 sem.", "hace 4 sem.", "hace 3 sem.", "hace 2 sem.", "la pasada", "esta semana" ],
                                         class: "hidden @xl:flex") %>
  </div>
</div>

Qué hace

  • Cifras proporcionales en el valor grande; rodillos solo si live.
  • Tooltip con el valor primero y el periodo después; la línea busca el punto más cercano.
  • La tendencia también vive en una lista accesible (sr-only).

Props

Nombre Tipo Default Descripción
label / value String / Numeric — Qué se mide y su valor actual.
format :integer | :currency | :percent :integer Compacta a partir de 100 mil (128.4 mil, 1.2 M).
delta / period Numeric (%) / String nil Cambio y contra qué ("vs. mes pasado").
good :up | :down :up Si subir es bueno (ingresos) o malo (cancelaciones).
trend / trend_labels Array nil Hasta ~12 valores; el último es el periodo actual.
icon / href HTML / String nil Ícono a la derecha; href vuelve la tarjeta un enlace.
live Boolean false Valor con rodillos (Ui::AnimatedNumberComponent).

Accesibilidad