Totalizer e TotalsSummary

Dados

Totalizer é o total de um período com a variação: verde quando sobe, vermelho quando cai. TotalsSummary é o fecho de uma fatura: as linhas de subtotal e o total em destaque.

Substitui no Brain:fp-totalfp-totalbar

Totalizadores e fecho de fatura

TPV do mês
R$ 4,2 mi
+12,4%vs. junho
Transações
38.214
+8,1%vs. junho
Saldo
R$ 812 mil
−2,4%vs. junho
Parceiros ativos
1.204
+3,2%vs. junho
SubtotalR$ 12.400,00
ImpostosInclusos
Total a pagarR$ 12.400,00
TPV do mês
R$ 4,2 mi
+12,4%vs. junho
Transações
38.214
+8,1%vs. junho
Saldo
R$ 812 mil
−2,4%vs. junho
Parceiros ativos
1.204
+3,2%vs. junho
SubtotalR$ 12.400,00
ImpostosInclusos
Total a pagarR$ 12.400,00
import { Totalizer, TotalsSummary } from "@paytime/ui";
import { CircleDollarSign, CreditCard, Scale, Users } from "lucide-react";

export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
        <Totalizer label="TPV do mês" value="R$ 4,2 mi" icon={<CircleDollarSign />} change={12.4} changeLabel="vs. junho" />
        <Totalizer label="Transações" value="38.214" icon={<CreditCard />} change={8.1} changeLabel="vs. junho" />
        <Totalizer label="Saldo" value="R$ 812 mil" icon={<Scale />} change={-2.4} changeLabel="vs. junho" />
        <Totalizer label="Parceiros ativos" value="1.204" icon={<Users />} change={3.2} changeLabel="vs. junho" />
      </div>
      <TotalsSummary
        className="max-w-md"
        rows={[
          { label: "Subtotal", value: "R$ 12.400,00" },
          { label: "Impostos", value: "Inclusos" },
        ]}
        total={{ label: "Total a pagar", value: "R$ 12.400,00" }}
      />
    </div>
  );
}