refactor: move componentes de estabelecimentos para relatorios

components/relatorios/estabelecimentos/summary-cards.tsx

@@ -0,0 +1,78 @@
+"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>
+	);
+}