refactor: reorganiza componentes compartilhados e caminhos do app

components/anotacoes/notes-page.tsx

@@ -8,7 +8,7 @@ import {
 	deleteNoteAction,
 } from "@/app/(dashboard)/anotacoes/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
-import { EmptyState } from "@/components/empty-state";
+import { EmptyState } from "@/components/shared/empty-state";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card } from "../ui/card";

components/cartoes/cards-page.tsx

@@ -6,7 +6,7 @@ import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { deleteCardAction } from "@/app/(dashboard)/cartoes/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
-import { EmptyState } from "@/components/empty-state";
+import { EmptyState } from "@/components/shared/empty-state";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

components/contas/accounts-page.tsx

@@ -8,7 +8,7 @@ import { toast } from "sonner";
 import { deleteAccountAction } from "@/app/(dashboard)/contas/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
 import { AccountCard } from "@/components/contas/account-card";
-import { EmptyState } from "@/components/empty-state";
+import { EmptyState } from "@/components/shared/empty-state";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getCurrentPeriod } from "@/lib/utils/period";

components/insights/insights-page.tsx

@@ -17,12 +17,12 @@ import {
 	saveInsightsAction,
 } from "@/app/(dashboard)/insights/actions";
 import { DEFAULT_MODEL } from "@/app/(dashboard)/insights/data";
+import { EmptyState } from "@/components/shared/empty-state";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { InsightsResponse } from "@/lib/schemas/insights";
-import { EmptyState } from "../empty-state";
 import { InsightsGrid } from "./insights-grid";
 import { ModelSelector } from "./model-selector";
 

components/lancamentos/dialogs/lancamento-dialog/payment-method-section.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Label } from "@/components/ui/label";
-import { MonthPicker } from "@/components/ui/monthpicker";
+import { MonthPicker } from "@/components/ui/month-picker";
 import {
 	Popover,
 	PopoverContent,

components/lancamentos/dialogs/mass-add-dialog.tsx

@@ -15,7 +15,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import { MonthPicker } from "@/components/ui/monthpicker";
+import { MonthPicker } from "@/components/ui/month-picker";
 import {
 	Popover,
 	PopoverContent,
@@ -36,7 +36,6 @@ import { groupAndSortCategorias } from "@/lib/lancamentos/categoria-helpers";
 import { LANCAMENTO_PAYMENT_METHODS } from "@/lib/lancamentos/constants";
 import { getTodayDateString } from "@/lib/utils/date";
 import { displayPeriod } from "@/lib/utils/period";
-import type { SelectOption } from "../../types";
 import {
 	CategoriaSelectContent,
 	ContaCartaoSelectContent,
@@ -45,6 +44,7 @@ import {
 	TransactionTypeSelectContent,
 } from "../select-items";
 import { EstabelecimentoInput } from "../shared/estabelecimento-input";
+import type { SelectOption } from "../types";
 
 /** Payment methods sem Boleto para este modal */
 const MASS_ADD_PAYMENT_METHODS = LANCAMENTO_PAYMENT_METHODS.filter(

components/navbar/nav-tools.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import { RiCalculatorLine, RiEyeLine, RiEyeOffLine } from "@remixicon/react";
-import { useState } from "react";
-import { CalculatorDialogContent } from "@/components/calculadora/calculator-dialog";
-import { usePrivacyMode } from "@/components/privacy-provider";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogTrigger } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils/ui";
-
-const itemClass =
-	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
-
-export function NavToolsDropdown() {
-	const { privacyMode, toggle } = usePrivacyMode();
-	const [calcOpen, setCalcOpen] = useState(false);
-
-	return (
-		<Dialog open={calcOpen} onOpenChange={setCalcOpen}>
-			<ul className="grid w-52 gap-0.5 p-2">
-				<li>
-					<DialogTrigger asChild>
-						<button type="button" className={cn(itemClass)}>
-							<span className="text-muted-foreground shrink-0">
-								<RiCalculatorLine className="size-4" />
-							</span>
-							<span className="flex-1 text-left">calculadora</span>
-						</button>
-					</DialogTrigger>
-				</li>
-				<li>
-					<button type="button" onClick={toggle} className={cn(itemClass)}>
-						<span className="text-muted-foreground shrink-0">
-							{privacyMode ? (
-								<RiEyeOffLine className="size-4" />
-							) : (
-								<RiEyeLine className="size-4" />
-							)}
-						</span>
-						<span className="flex-1 text-left">privacidade</span>
-						{privacyMode && (
-							<Badge
-								variant="secondary"
-								className="text-[10px] px-1.5 py-0 h-4"
-							>
-								Ativo
-							</Badge>
-						)}
-					</button>
-				</li>
-			</ul>
-			<CalculatorDialogContent open={calcOpen} />
-		</Dialog>
-	);
-}
-
-type MobileToolsProps = {
-	onClose: () => void;
-};
-
-export function MobileTools({ onClose }: MobileToolsProps) {
-	const { privacyMode, toggle } = usePrivacyMode();
-	const [calcOpen, setCalcOpen] = useState(false);
-
-	return (
-		<Dialog open={calcOpen} onOpenChange={setCalcOpen}>
-			<DialogTrigger asChild>
-				<button
-					type="button"
-					className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
-				>
-					<span className="text-muted-foreground shrink-0">
-						<RiCalculatorLine className="size-4" />
-					</span>
-					<span className="flex-1 text-left">calculadora</span>
-				</button>
-			</DialogTrigger>
-			<button
-				type="button"
-				onClick={() => {
-					toggle();
-					onClose();
-				}}
-				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
-			>
-				<span className="text-muted-foreground shrink-0">
-					{privacyMode ? (
-						<RiEyeOffLine className="size-4" />
-					) : (
-						<RiEyeLine className="size-4" />
-					)}
-				</span>
-				<span className="flex-1 text-left">privacidade</span>
-				{privacyMode && (
-					<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4">
-						Ativo
-					</Badge>
-				)}
-			</button>
-			<CalculatorDialogContent open={calcOpen} />
-		</Dialog>
-	);
-}

components/navigation/navbar/app-navbar.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
+import { Logo } from "@/components/logo";
 import { NotificationBell } from "@/components/notificacoes/notification-bell";
-import { RefreshPageButton } from "@/components/refresh-page-button";
+import { RefreshPageButton } from "@/components/shared/refresh-page-button";
 import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
-import { Logo } from "../logo";
 import { NavMenu } from "./nav-menu";
 import { NavbarUser } from "./navbar-user";
 

components/navigation/navbar/nav-items.tsx

@@ -8,6 +8,7 @@ import {
 	RiFileChartLine,
 	RiGroupLine,
 	RiPriceTag3Line,
+	RiSecurePaymentLine,
 	RiSparklingLine,
 	RiStore2Line,
 	RiTodoLine,
@@ -111,6 +112,11 @@ export const NAV_SECTIONS: NavSection[] = [
 				icon: <RiBankCard2Line className="size-4" />,
 				preservePeriod: true,
 			},
+			{
+				href: "/relatorios/analise-parcelas",
+				label: "análise de parcelas",
+				icon: <RiSecurePaymentLine className="size-4" />,
+			},
 			{
 				href: "/relatorios/estabelecimentos",
 				label: "estabelecimentos",

components/navigation/navbar/nav-menu.tsx

@@ -2,7 +2,9 @@
 
 import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
 import { useState } from "react";
+import { CalculatorDialogContent } from "@/components/calculadora/calculator-dialog";
 import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
 import {
 	NavigationMenu,
 	NavigationMenuContent,
@@ -26,7 +28,9 @@ import { MobileTools, NavToolsDropdown } from "./nav-tools";
 
 export function NavMenu() {
 	const [sheetOpen, setSheetOpen] = useState(false);
+	const [calculatorOpen, setCalculatorOpen] = useState(false);
 	const close = () => setSheetOpen(false);
+	const openCalculator = () => setCalculatorOpen(true);
 
 	return (
 		<>
@@ -56,7 +60,7 @@ export function NavMenu() {
 								Ferramentas
 							</NavigationMenuTrigger>
 							<NavigationMenuContent>
-								<NavToolsDropdown />
+								<NavToolsDropdown onOpenCalculator={openCalculator} />
 							</NavigationMenuContent>
 						</NavigationMenuItem>
 					</NavigationMenuList>
@@ -114,10 +118,14 @@ export function NavMenu() {
 						})}
 
 						<MobileSectionLabel label="Ferramentas" />
-						<MobileTools onClose={close} />
+						<MobileTools onClose={close} onOpenCalculator={openCalculator} />
 					</nav>
 				</SheetContent>
 			</Sheet>
+
+			<Dialog open={calculatorOpen} onOpenChange={setCalculatorOpen}>
+				<CalculatorDialogContent open={calculatorOpen} />
+			</Dialog>
 		</>
 	);
 }

components/navigation/navbar/nav-tools.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { RiCalculatorLine, RiEyeLine, RiEyeOffLine } from "@remixicon/react";
+import { usePrivacyMode } from "@/components/privacy-provider";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils/ui";
+
+const itemClass =
+	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
+
+type NavToolsDropdownProps = {
+	onOpenCalculator: () => void;
+};
+
+export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
+	const { privacyMode, toggle } = usePrivacyMode();
+
+	return (
+		<ul className="grid w-52 gap-0.5 p-2">
+			<li>
+				<button
+					type="button"
+					className={cn(itemClass)}
+					onClick={onOpenCalculator}
+				>
+					<span className="text-muted-foreground shrink-0">
+						<RiCalculatorLine className="size-4" />
+					</span>
+					<span className="flex-1 text-left">calculadora</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" onClick={toggle} className={cn(itemClass)}>
+					<span className="text-muted-foreground shrink-0">
+						{privacyMode ? (
+							<RiEyeOffLine className="size-4" />
+						) : (
+							<RiEyeLine className="size-4" />
+						)}
+					</span>
+					<span className="flex-1 text-left">privacidade</span>
+					{privacyMode && (
+						<Badge
+							variant="secondary"
+							className="text-[10px] px-1.5 py-0 h-4 text-success"
+						>
+							Ativo
+						</Badge>
+					)}
+				</button>
+			</li>
+		</ul>
+	);
+}
+
+type MobileToolsProps = {
+	onClose: () => void;
+	onOpenCalculator: () => void;
+};
+
+export function MobileTools({ onClose, onOpenCalculator }: MobileToolsProps) {
+	const { privacyMode, toggle } = usePrivacyMode();
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					onClose();
+					onOpenCalculator();
+				}}
+				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+			>
+				<span className="text-muted-foreground shrink-0">
+					<RiCalculatorLine className="size-4" />
+				</span>
+				<span className="flex-1 text-left">calculadora</span>
+			</button>
+			<button
+				type="button"
+				onClick={() => {
+					toggle();
+					onClose();
+				}}
+				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+			>
+				<span className="text-muted-foreground shrink-0">
+					{privacyMode ? (
+						<RiEyeOffLine className="size-4" />
+					) : (
+						<RiEyeLine className="size-4" />
+					)}
+				</span>
+				<span className="flex-1 text-left">privacidade</span>
+				{privacyMode && (
+					<Badge
+						variant="secondary"
+						className="text-[10px] px-1.5 py-0 h-4 text-success"
+					>
+						Ativo
+					</Badge>
+				)}
+			</button>
+		</>
+	);
+}

components/navigation/navbar/navbar-user.tsx

@@ -11,6 +11,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { FeedbackDialogBody } from "@/components/feedback/feedback-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 import {
 	DropdownMenu,
@@ -24,7 +25,6 @@ import { authClient } from "@/lib/auth/client";
 import { getAvatarSrc } from "@/lib/pagadores/utils";
 import { cn } from "@/lib/utils/ui";
 import { version } from "@/package.json";
-import { Badge } from "../ui/badge";
 
 const itemClass =
 	"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent";

components/navigation/sidebar/app-sidebar.tsx

@@ -1,9 +1,9 @@
 "use client";
 import * as React from "react";
 import { Logo } from "@/components/logo";
-import { NavMain } from "@/components/sidebar/nav-main";
-import { NavSecondary } from "@/components/sidebar/nav-secondary";
-import { NavUser } from "@/components/sidebar/nav-user";
+import { NavMain } from "@/components/navigation/sidebar/nav-main";
+import { NavSecondary } from "@/components/navigation/sidebar/nav-secondary";
+import { NavUser } from "@/components/navigation/sidebar/nav-user";
 import {
 	Sidebar,
 	SidebarContent,

components/navigation/sidebar/nav-link.tsx

@@ -10,6 +10,7 @@ import {
 	RiFundsLine,
 	RiGroupLine,
 	RiPriceTag3Line,
+	RiSecurePaymentLine,
 	RiSettings2Line,
 	RiSparklingLine,
 	RiTodoLine,
@@ -165,6 +166,11 @@ export function createSidebarNavData(
 						url: "/relatorios/uso-cartoes",
 						icon: RiBankCard2Line,
 					},
+					{
+						title: "Análise de Parcelas",
+						url: "/relatorios/analise-parcelas",
+						icon: RiSecurePaymentLine,
+					},
 				],
 			},
 		],

components/orcamentos/budgets-page.tsx

@@ -8,7 +8,7 @@ import {
 	duplicatePreviousMonthBudgetsAction,
 } from "@/app/(dashboard)/orcamentos/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
-import { EmptyState } from "@/components/empty-state";
+import { EmptyState } from "@/components/shared/empty-state";
 import { Button } from "@/components/ui/button";
 import { Card } from "../ui/card";
 import { BudgetCard } from "./budget-card";

components/period-picker.tsx

@@ -5,7 +5,7 @@ import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { MonthPicker } from "@/components/ui/monthpicker";
+import { MonthPicker } from "@/components/ui/month-picker";
 import {
 	Popover,
 	PopoverContent,

components/relatorios/category-report-chart.tsx

@@ -9,7 +9,7 @@ import {
 	type TooltipProps,
 	XAxis,
 } from "recharts";
-import { EmptyState } from "@/components/empty-state";
+import { EmptyState } from "@/components/shared/empty-state";
 import {
 	Card,
 	CardContent,

components/relatorios/category-report-filters.tsx

@@ -18,7 +18,7 @@ import {
 	CommandItem,
 	CommandList,
 } from "@/components/ui/command";
-import { MonthPicker } from "@/components/ui/monthpicker";
+import { MonthPicker } from "@/components/ui/month-picker";
 import {
 	Popover,
 	PopoverContent,

components/relatorios/category-report-page.tsx

@@ -7,8 +7,8 @@ import {
 } from "@remixicon/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useMemo, useState, useTransition } from "react";
-import { EmptyState } from "@/components/empty-state";
-import { CategoryReportSkeleton } from "@/components/skeletons/category-report-skeleton";
+import { EmptyState } from "@/components/shared/empty-state";
+import { CategoryReportSkeleton } from "@/components/shared/skeletons/category-report-skeleton";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { CategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";

components/top-estabelecimentos/establishments-list.tsx

@@ -1,130 +0,0 @@
-"use client";
-
-import { RiStore2Line } from "@remixicon/react";
-import MoneyValues from "@/components/money-values";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { WidgetEmptyState } from "@/components/widget-empty-state";
-import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
-import { Progress } from "../ui/progress";
-
-type EstablishmentsListProps = {
-	establishments: TopEstabelecimentosData["establishments"];
-};
-
-const buildInitials = (value: string) => {
-	const parts = value.trim().split(/\s+/).filter(Boolean);
-	if (parts.length === 0) return "ES";
-	if (parts.length === 1) {
-		const firstPart = parts[0];
-		return firstPart ? firstPart.slice(0, 2).toUpperCase() : "ES";
-	}
-	const firstChar = parts[0]?.[0] ?? "";
-	const secondChar = parts[1]?.[0] ?? "";
-	return `${firstChar}${secondChar}`.toUpperCase() || "ES";
-};
-
-export function EstablishmentsList({
-	establishments,
-}: EstablishmentsListProps) {
-	if (establishments.length === 0) {
-		return (
-			<Card className="h-full">
-				<CardHeader className="pb-3">
-					<CardTitle className="flex items-center gap-1.5 text-base">
-						<RiStore2Line className="size-4 text-primary" />
-						Top Estabelecimentos
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<WidgetEmptyState
-						icon={<RiStore2Line className="size-6 text-muted-foreground" />}
-						title="Nenhum estabelecimento encontrado"
-						description="Quando houver compras registradas, elas aparecerão aqui."
-					/>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	const maxCount = Math.max(...establishments.map((e) => e.count));
-
-	return (
-		<Card className="h-full">
-			<CardHeader className="pb-3">
-				<CardTitle className="flex items-center gap-1.5 text-base">
-					<RiStore2Line className="size-4 text-primary" />
-					Top Estabelecimentos por Frequência
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="pt-0">
-				<div className="flex flex-col">
-					{establishments.map((establishment, index) => {
-						const _initials = buildInitials(establishment.name);
-
-						return (
-							<div
-								key={establishment.name}
-								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 - same size as icon containers */}
-										<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 categories */}
-										<div className="min-w-0 flex-1">
-											<span className="text-sm font-medium truncate block">
-												{establishment.name}
-											</span>
-											<div className="flex items-center gap-1 mt-0.5 flex-wrap">
-												{establishment.categories
-													.slice(0, 2)
-													.map((cat, catIndex) => (
-														<Badge
-															key={catIndex}
-															variant="secondary"
-															className="text-xs px-1.5 py-0 h-5"
-														>
-															{cat.name}
-														</Badge>
-													))}
-											</div>
-										</div>
-									</div>
-
-									{/* Value and stats */}
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
-										<MoneyValues
-											className="text-foreground"
-											amount={establishment.totalAmount}
-										/>
-										<span className="text-xs text-muted-foreground">
-											{establishment.count}x • Média:{" "}
-											<MoneyValues
-												className="text-xs"
-												amount={establishment.avgAmount}
-											/>
-										</span>
-									</div>
-								</div>
-
-								{/* Progress bar */}
-								<div className="ml-12 mt-1.5">
-									<Progress
-										className="h-1.5"
-										value={(establishment.count / maxCount) * 100}
-									/>
-								</div>
-							</div>
-						);
-					})}
-				</div>
-			</CardContent>
-		</Card>
-	);
-}

components/top-estabelecimentos/highlights-cards.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import { RiFireLine, RiTrophyLine } from "@remixicon/react";
-import { Card, CardContent } from "@/components/ui/card";
-import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
-
-type HighlightsCardsProps = {
-	summary: TopEstabelecimentosData["summary"];
-};
-
-export function HighlightsCards({ summary }: HighlightsCardsProps) {
-	return (
-		<div className="grid gap-3 sm:grid-cols-2">
-			<Card className="bg-linear-to-br from-violet-50 to-violet-50/50 dark:from-violet-950/20 dark:to-violet-950/10">
-				<CardContent className="p-4">
-					<div className="flex items-center gap-3">
-						<div className="flex items-center justify-center size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40">
-							<RiTrophyLine className="size-5 text-violet-600 dark:text-violet-400" />
-						</div>
-						<div className="min-w-0 flex-1">
-							<p className="text-xs text-violet-700/80 dark:text-violet-400/80 font-medium">
-								Mais Frequente
-							</p>
-							<p className="font-bold text-xl text-violet-900 dark:text-violet-100 truncate">
-								{summary.mostFrequent || "—"}
-							</p>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-
-			<Card className="bg-linear-to-br from-red-50 to-rose-50/50 dark:from-red-950/20 dark:to-rose-950/10">
-				<CardContent className="p-4">
-					<div className="flex items-center gap-3">
-						<div className="flex items-center justify-center size-10 rounded-xl bg-red-100 dark:bg-red-900/40">
-							<RiFireLine className="size-5 text-red-600 dark:text-red-400" />
-						</div>
-						<div className="min-w-0 flex-1">
-							<p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium">
-								Maior Gasto Total
-							</p>
-							<p className="font-bold text-xl text-red-900 dark:text-red-100 truncate">
-								{summary.highestSpending || "—"}
-							</p>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}

components/top-estabelecimentos/period-filter.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import type { PeriodFilter } from "@/lib/top-estabelecimentos/fetch-data";
-import { cn } from "@/lib/utils";
-
-type PeriodFilterProps = {
-	currentFilter: PeriodFilter;
-};
-
-const filterOptions: { value: PeriodFilter; label: string }[] = [
-	{ value: "3", label: "3 meses" },
-	{ value: "6", label: "6 meses" },
-	{ value: "12", label: "12 meses" },
-];
-
-export function PeriodFilterButtons({ currentFilter }: PeriodFilterProps) {
-	const router = useRouter();
-	const searchParams = useSearchParams();
-
-	const handleFilterChange = (filter: PeriodFilter) => {
-		const params = new URLSearchParams(searchParams.toString());
-		params.set("meses", filter);
-		router.push(`/relatorios/estabelecimentos?${params.toString()}`);
-	};
-
-	return (
-		<div className="flex items-center gap-2">
-			<div className="flex items-center gap-1">
-				{filterOptions.map((option) => (
-					<Button
-						key={option.value}
-						variant={currentFilter === option.value ? "default" : "outline"}
-						size="sm"
-						onClick={() => handleFilterChange(option.value)}
-						className={cn(
-							"h-8",
-							currentFilter === option.value && "pointer-events-none",
-						)}
-					>
-						{option.label}
-					</Button>
-				))}
-			</div>
-		</div>
-	);
-}

components/top-estabelecimentos/summary-cards.tsx

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

components/top-estabelecimentos/top-categories.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { RiPriceTag3Line } from "@remixicon/react";
-import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
-import MoneyValues from "@/components/money-values";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { WidgetEmptyState } from "@/components/widget-empty-state";
-import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
-import { Progress } from "../ui/progress";
-
-type TopCategoriesProps = {
-	categories: TopEstabelecimentosData["topCategories"];
-};
-
-export function TopCategories({ categories }: TopCategoriesProps) {
-	if (categories.length === 0) {
-		return (
-			<Card className="h-full">
-				<CardHeader className="pb-3">
-					<CardTitle className="flex items-center gap-1.5 text-base">
-						<RiPriceTag3Line className="size-4 text-primary" />
-						Principais Categorias
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<WidgetEmptyState
-						icon={<RiPriceTag3Line className="size-6 text-muted-foreground" />}
-						title="Nenhuma categoria encontrada"
-						description="Quando houver despesas categorizadas, elas aparecerão aqui."
-					/>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	const totalAmount = categories.reduce((acc, c) => acc + c.totalAmount, 0);
-
-	return (
-		<Card className="h-full">
-			<CardHeader className="pb-3">
-				<CardTitle className="flex items-center gap-1.5 text-base">
-					<RiPriceTag3Line className="size-4 text-primary" />
-					Principais Categorias
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="pt-0">
-				<div className="flex flex-col">
-					{categories.map((category, index) => {
-						const percent =
-							totalAmount > 0 ? (category.totalAmount / totalAmount) * 100 : 0;
-
-						return (
-							<div
-								key={category.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">
-										<CategoryIconBadge
-											icon={category.icon}
-											name={category.name}
-											colorIndex={index}
-										/>
-
-										{/* Name and percentage */}
-										<div className="min-w-0 flex-1">
-											<span className="text-sm font-medium truncate block">
-												{category.name}
-											</span>
-											<span className="text-xs text-muted-foreground">
-												{percent.toFixed(0)}% do total •{" "}
-												{category.transactionCount}x
-											</span>
-										</div>
-									</div>
-
-									{/* Value */}
-									<div className="flex shrink-0 flex-col items-end">
-										<MoneyValues
-											className="text-foreground"
-											amount={category.totalAmount}
-										/>
-									</div>
-								</div>
-
-								{/* Progress bar */}
-								<div className="ml-11 mt-1.5">
-									<Progress className="h-1.5" value={percent} />
-								</div>
-							</div>
-						);
-					})}
-				</div>
-			</CardContent>
-		</Card>
-	);
-}