79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
RiExchangeLine,
|
|
RiMoneyDollarCircleLine,
|
|
RiRepeatLine,
|
|
RiStore2Line,
|
|
} from "@remixicon/react";
|
|
import MoneyValues from "@/components/money-values";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import type { TopEstabelecimentosData } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
|
|
|
type SummaryCardsProps = {
|
|
summary: TopEstabelecimentosData["summary"];
|
|
};
|
|
|
|
export function SummaryCards({ summary }: SummaryCardsProps) {
|
|
const cards = [
|
|
{
|
|
title: "Estabelecimentos",
|
|
value: summary.totalEstablishments,
|
|
isMoney: false,
|
|
icon: RiStore2Line,
|
|
description: "Locais diferentes",
|
|
},
|
|
{
|
|
title: "Transações",
|
|
value: summary.totalTransactions,
|
|
isMoney: false,
|
|
icon: RiExchangeLine,
|
|
description: "Compras no período",
|
|
},
|
|
{
|
|
title: "Total Gasto",
|
|
value: summary.totalSpent,
|
|
isMoney: true,
|
|
icon: RiMoneyDollarCircleLine,
|
|
description: "Soma de todas as compras",
|
|
},
|
|
{
|
|
title: "Ticket Médio",
|
|
value: summary.avgPerTransaction,
|
|
isMoney: true,
|
|
icon: RiRepeatLine,
|
|
description: "Média por transação",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
{cards.map((card) => (
|
|
<Card key={card.title}>
|
|
<CardContent className="px-4 py-2">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-medium text-muted-foreground">
|
|
{card.title}
|
|
</p>
|
|
{card.isMoney ? (
|
|
<MoneyValues
|
|
className="text-2xl font-semibold"
|
|
amount={card.value}
|
|
/>
|
|
) : (
|
|
<p className="text-2xl font-semibold">{card.value}</p>
|
|
)}
|
|
<p className="text-xs text-muted-foreground">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
<card.icon className="size-5 text-muted-foreground shrink-0" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|