refactor(core): move app para src e padroniza estrutura

src/features/reports/components/cards/card-top-expenses.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { RiShoppingBag3Line } from "@remixicon/react";
+import type { CardDetailData } from "@/features/reports/cards-report-queries";
+import MoneyValues from "@/shared/components/money-values";
+import { Badge } from "@/shared/components/ui/badge";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import { Progress } from "@/shared/components/ui/progress";
+import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
+
+type CardTopExpensesProps = {
+	data: CardDetailData["topExpenses"];
+};
+
+export function CardTopExpenses({ data }: CardTopExpensesProps) {
+	if (data.length === 0) {
+		return (
+			<Card className="h-full">
+				<CardHeader className="pb-3">
+					<CardTitle className="flex items-center gap-1.5 text-base">
+						<RiShoppingBag3Line className="size-4 text-primary" />
+						Top 10 Gastos do Mês
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<WidgetEmptyState
+						icon={
+							<RiShoppingBag3Line className="size-6 text-muted-foreground" />
+						}
+						title="Nenhum gasto encontrado"
+						description="Quando houver gastos registrados, eles aparecerão aqui."
+					/>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	const maxAmount = Math.max(...data.map((e) => e.amount));
+
+	return (
+		<Card className="h-full overflow-hidden">
+			<CardHeader className="pb-3">
+				<CardTitle className="flex items-center gap-1.5 text-base">
+					<RiShoppingBag3Line className="size-4 text-primary" />
+					Top 10 Gastos do Mês
+				</CardTitle>
+			</CardHeader>
+			<CardContent className="overflow-x-hidden pt-0">
+				<div className="flex flex-col">
+					{data.map((expense, index) => (
+						<div
+							key={expense.id}
+							className="flex flex-col py-2 border-b border-dashed last:border-0"
+						>
+							<div className="flex items-center justify-between gap-3">
+								<div className="flex min-w-0 flex-1 items-center gap-2">
+									{/* Rank number */}
+									<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
+										<span className="text-sm font-semibold text-muted-foreground">
+											{index + 1}
+										</span>
+									</div>
+
+									{/* Name and details */}
+									<div className="min-w-0 flex-1">
+										<span className="text-sm font-medium truncate block">
+											{expense.name}
+										</span>
+										<div className="mt-0.5 flex min-w-0 flex-col gap-0.5">
+											<span className="text-xs text-muted-foreground">
+												{expense.date}
+											</span>
+											{expense.category && (
+												<Badge
+													variant="secondary"
+													className="h-5 max-w-full px-1.5 py-0 text-xs truncate"
+												>
+													{expense.category}
+												</Badge>
+											)}
+										</div>
+									</div>
+								</div>
+
+								{/* Value */}
+								<div className="flex shrink-0 flex-col items-end">
+									<MoneyValues
+										className="text-foreground"
+										amount={expense.amount}
+									/>
+								</div>
+							</div>
+
+							{/* Progress bar */}
+							<div className="pl-12 mt-1.5">
+								<Progress
+									className="h-1.5"
+									value={(expense.amount / maxAmount) * 100}
+								/>
+							</div>
+						</div>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}