refactor(ui): melhorar layouts da aba Companion e página de cartões

- Criar componente CompanionTab com layout reorganizado
- Simplificar ApiTokensForm com lista de dispositivos mais compacta
- Redesenhar página de relatórios de cartões com layout horizontal
- Atualizar CardsOverview com stats em cards separados e lista compacta
- Simplificar CardUsageChart removendo seletor de período (fixo 12 meses)
- Criar CardInvoiceStatus com timeline minimalista
- Atualizar skeletons para refletir novos layouts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/(dashboard)/ajustes/page.tsx

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
-import { ApiTokensForm } from "@/components/ajustes/api-tokens-form";
+import { CompanionTab } from "@/components/ajustes/companion-tab";
 import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
 import { PreferencesForm } from "@/components/ajustes/preferences-form";
 import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
@@ -33,7 +33,7 @@ export default async function Page() {
 			<Tabs defaultValue="preferencias" className="w-full">
 				<TabsList>
 					<TabsTrigger value="preferencias">Preferências</TabsTrigger>
-					<TabsTrigger value="dispositivos">Dispositivos</TabsTrigger>
+					<TabsTrigger value="companion">Companion</TabsTrigger>
 					<TabsTrigger value="nome">Alterar nome</TabsTrigger>
 					<TabsTrigger value="senha">Alterar senha</TabsTrigger>
 					<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
@@ -61,20 +61,8 @@ export default async function Page() {
 					</Card>
 				</TabsContent>
 
-				<TabsContent value="dispositivos" className="mt-4">
+				<TabsContent value="companion" className="mt-4">
-					<Card className="p-6">
+					<CompanionTab tokens={userApiTokens} />
-						<div className="space-y-4">
-							<div>
-								<h2 className="text-lg font-bold mb-1">OpenSheets Companion</h2>
-								<p className="text-sm text-muted-foreground mb-4">
-									Conecte o app Android OpenSheets Companion para capturar
-									automaticamente notificações de transações financeiras e
-									enviá-las para sua caixa de entrada.
-								</p>
-							</div>
-							<ApiTokensForm tokens={userApiTokens} />
-						</div>
-					</Card>
 				</TabsContent>
 
 				<TabsContent value="nome" className="mt-4">

app/(dashboard)/relatorios/cartoes/loading.tsx

@@ -3,83 +3,86 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
 	return (
-		<main className="flex flex-col gap-4 px-6">
+		<main className="flex flex-col gap-4">
-			<div className="flex flex-col gap-1">
+			{/* MonthNavigation skeleton */}
-				<Skeleton className="h-8 w-48" />
+			<Skeleton className="h-10 w-64" />
-				<Skeleton className="h-4 w-96" />
+
+			{/* Summary stats */}
+			<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+				{[1, 2, 3, 4].map((i) => (
+					<Card key={i}>
+						<CardContent className="p-4">
+							<Skeleton className="h-3 w-16 mb-1" />
+							<Skeleton className="h-6 w-24" />
+						</CardContent>
+					</Card>
+				))}
 			</div>
 
-			<Skeleton className="h-10 w-full max-w-md" />
+			{/* Cards grid */}
+			<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+				{[1, 2, 3, 4].map((i) => (
+					<Skeleton key={i} className="h-16 w-full rounded-lg" />
+				))}
+			</div>
 
-			<div className="grid gap-4 lg:grid-cols-3">
+			{/* CardUsageChart */}
-				<div className="lg:col-span-1">
+			<Card>
-					<Card>
+				<CardHeader className="pb-2">
-						<CardHeader className="pb-2">
+					<div className="flex items-center justify-between">
-							<Skeleton className="h-5 w-40" />
+						<Skeleton className="h-5 w-32" />
-						</CardHeader>
+						<div className="flex items-center gap-2">
-						<CardContent className="space-y-4">
+							<Skeleton className="size-6 rounded" />
-							<div className="grid gap-3 sm:grid-cols-3">
+							<Skeleton className="h-4 w-24" />
-								<Skeleton className="h-16 w-full" />
+						</div>
-								<Skeleton className="h-16 w-full" />
-								<Skeleton className="h-16 w-full" />
-							</div>
-							<div className="space-y-3">
-								{[1, 2, 3].map((i) => (
-									<Skeleton key={i} className="h-20 w-full" />
-								))}
-							</div>
-						</CardContent>
-					</Card>
-				</div>
-
-				<div className="lg:col-span-2 space-y-4">
-					<Skeleton className="h-8 w-48" />
-
-					<Card>
-						<CardHeader className="pb-2">
-							<Skeleton className="h-5 w-40" />
-						</CardHeader>
-						<CardContent>
-							<Skeleton className="h-[280px] w-full" />
-						</CardContent>
-					</Card>
-
-					<div className="grid gap-4 md:grid-cols-2">
-						<Card>
-							<CardHeader className="pb-2">
-								<Skeleton className="h-5 w-40" />
-							</CardHeader>
-							<CardContent className="space-y-3">
-								{[1, 2, 3, 4, 5].map((i) => (
-									<Skeleton key={i} className="h-12 w-full" />
-								))}
-							</CardContent>
-						</Card>
-
-						<Card>
-							<CardHeader className="pb-2">
-								<Skeleton className="h-5 w-40" />
-							</CardHeader>
-							<CardContent className="space-y-3">
-								{[1, 2, 3, 4, 5].map((i) => (
-									<Skeleton key={i} className="h-12 w-full" />
-								))}
-							</CardContent>
-						</Card>
 					</div>
+				</CardHeader>
+				<CardContent>
+					<Skeleton className="h-[280px] w-full" />
+				</CardContent>
+			</Card>
 
-					<Card>
+			{/* CategoryBreakdown + TopExpenses */}
-						<CardHeader className="pb-2">
+			<div className="grid gap-4 md:grid-cols-2">
-							<Skeleton className="h-5 w-40" />
+				<Card className="h-full">
-						</CardHeader>
+					<CardHeader className="pb-3">
-						<CardContent className="space-y-2">
+						<Skeleton className="h-5 w-36" />
-							{[1, 2, 3, 4, 5, 6].map((i) => (
+					</CardHeader>
-								<Skeleton key={i} className="h-10 w-full" />
+					<CardContent className="space-y-2">
-							))}
+						{[1, 2, 3, 4].map((i) => (
-						</CardContent>
+							<Skeleton key={i} className="h-14 w-full" />
-					</Card>
+						))}
-				</div>
+					</CardContent>
+				</Card>
+
+				<Card className="h-full">
+					<CardHeader className="pb-3">
+						<Skeleton className="h-5 w-36" />
+					</CardHeader>
+					<CardContent className="space-y-2">
+						{[1, 2, 3, 4].map((i) => (
+							<Skeleton key={i} className="h-14 w-full" />
+						))}
+					</CardContent>
+				</Card>
 			</div>
+
+			{/* CardInvoiceStatus - timeline minimalista */}
+			<Card>
+				<CardHeader className="pb-2">
+					<Skeleton className="h-5 w-24" />
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center gap-1">
+						{[1, 2, 3, 4, 5, 6].map((i) => (
+							<div key={i} className="flex-1 flex flex-col items-center gap-1">
+								<Skeleton className="w-full h-3 rounded-sm" />
+								<Skeleton className="h-3 w-6" />
+							</div>
+						))}
+					</div>
+				</CardContent>
+			</Card>
 		</main>
 	);
 }

app/(dashboard)/relatorios/cartoes/page.tsx

@@ -5,6 +5,7 @@ import { CardInvoiceStatus } from "@/components/relatorios/cartoes/card-invoice-
 import { CardTopExpenses } from "@/components/relatorios/cartoes/card-top-expenses";
 import { CardUsageChart } from "@/components/relatorios/cartoes/card-usage-chart";
 import { CardsOverview } from "@/components/relatorios/cartoes/cards-overview";
+import { Card } from "@/components/ui/card";
 import { getUser } from "@/lib/auth/server";
 import { fetchCartoesReportData } from "@/lib/relatorios/cartoes-report";
 import { parsePeriodParam } from "@/lib/utils/period";
@@ -43,43 +44,37 @@ export default async function RelatorioCartoesPage({
 		<main className="flex flex-col gap-4">
 			<MonthNavigation />
 
-			<div className="grid gap-4 lg:grid-cols-3">
+			<CardsOverview data={data} />
-				<div className="lg:col-span-1">
-					<CardsOverview data={data} />
-				</div>
 
-				<div className="lg:col-span-2 space-y-4">
+			{data.selectedCard ? (
-					{data.selectedCard ? (
+				<>
-						<>
+					<CardUsageChart
-							<CardUsageChart
+						data={data.selectedCard.monthlyUsage}
-								data={data.selectedCard.monthlyUsage}
+						limit={data.selectedCard.card.limit}
-								limit={data.selectedCard.card.limit}
+						card={{
-								card={{
+							name: data.selectedCard.card.name,
-									name: data.selectedCard.card.name,
+							logo: data.selectedCard.card.logo,
-									logo: data.selectedCard.card.logo,
+						}}
-								}}
+					/>
-							/>
 
-							<div className="grid gap-4 md:grid-cols-2">
+					<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
-								<CardCategoryBreakdown
-									data={data.selectedCard.categoryBreakdown}
-								/>
-								<CardTopExpenses data={data.selectedCard.topExpenses} />
-							</div>
 
-							<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
+					<div className="grid gap-4 md:grid-cols-2">
-						</>
+						<CardCategoryBreakdown data={data.selectedCard.categoryBreakdown} />
-					) : (
+						<CardTopExpenses data={data.selectedCard.topExpenses} />
-						<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+					</div>
-							<RiBankCard2Line className="size-12 mb-4" />
+				</>
-							<p className="text-lg font-medium">Nenhum cartão selecionado</p>
+			) : (
-							<p className="text-sm">
+				<Card className="flex flex-col items-center justify-center py-16 text-center">
-								Selecione um cartão na lista ao lado para ver detalhes.
+					<div className="flex size-14 items-center justify-center rounded-full bg-muted mb-4">
-							</p>
+						<RiBankCard2Line className="size-7 text-muted-foreground" />
-						</div>
+					</div>
-					)}
+					<p className="text-base font-medium">Nenhum cartão selecionado</p>
-				</div>
+					<p className="text-sm text-muted-foreground mt-1">
-			</div>
+						Selecione um cartão para ver os detalhes de uso.
+					</p>
+				</Card>
+			)}
 		</main>
 	);
 }

app/(dashboard)/top-estabelecimentos/page.tsx

@@ -54,7 +54,7 @@ export default async function TopEstabelecimentosPage({
 		<main className="flex flex-col gap-4">
 			<Card className="p-3 flex-row justify-between items-center">
 				<span className="text-sm text-muted-foreground">
-					Selecione o período
+					Selecione o intervalo de meses
 				</span>
 				<PeriodFilterButtons currentFilter={periodFilter} />
 			</Card>
@@ -63,8 +63,8 @@ export default async function TopEstabelecimentosPage({
 
 			<HighlightsCards summary={data.summary} />
 
-			<div className="grid gap-4 @3xl/main:grid-cols-3">
+			<div className="grid grid-cols-2 gap-4">
-				<div className="@3xl/main:col-span-2">
+				<div>
 					<EstablishmentsList establishments={data.establishments} />
 				</div>
 				<div>

app/globals.css

@@ -28,7 +28,7 @@
   --muted-foreground: oklch(45% 0.015 60);
 
   /* Accent - complementary warm tone */
-  --accent: oklch(93.996% 0.01787 64.782);
+  --accent: oklch(96.563% 0.00504 67.275);
   --accent-foreground: oklch(22% 0.025 45);
 
   /* Destructive - accessible red */
@@ -59,7 +59,7 @@
   --sidebar-ring: oklch(69.18% 0.18855 38.353);
 
   /* Layout */
-  --radius: 0.8rem;
+  --radius: 1rem;
 
   /* Shadows - warm tinted for cohesion */
   --shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04);

components/ajustes/api-tokens-form.tsx

@@ -27,7 +27,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -253,69 +252,57 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
 			</div>
 
 			{activeTokens.length === 0 ? (
-				<Card>
+				<div className="flex items-center gap-3 py-4 text-muted-foreground">
-					<CardContent className="flex flex-col items-center justify-center py-8 text-center">
+					<RiSmartphoneLine className="h-5 w-5" />
-						<RiSmartphoneLine className="h-10 w-10 text-muted-foreground mb-3" />
+					<p className="text-sm">
-						<p className="text-sm text-muted-foreground">
+						Nenhum dispositivo conectado. Crie um token para começar.
-							Nenhum dispositivo conectado.
+					</p>
-						</p>
+				</div>
-						<p className="text-sm text-muted-foreground">
-							Crie um token para conectar o app OpenSheets Companion.
-						</p>
-					</CardContent>
-				</Card>
 			) : (
-				<div className="space-y-3">
+				<div className="divide-y py-2">
 					{activeTokens.map((token) => (
-						<Card key={token.id}>
+						<div
-							<CardContent className="p-4">
+							key={token.id}
-								<div className="flex items-start justify-between">
+							className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-									<div className="flex items-start gap-3">
+						>
-										<div className="rounded-full bg-muted p-2">
+							<div className="flex items-center gap-3">
-											<RiSmartphoneLine className="h-5 w-5" />
+								<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
-										</div>
+									<RiSmartphoneLine className="h-4 w-4" />
-										<div>
-											<div className="flex items-center gap-2">
-												<span className="font-medium">{token.name}</span>
-												<Badge variant="outline" className="text-xs">
-													{token.tokenPrefix}...
-												</Badge>
-											</div>
-											<div className="text-sm text-muted-foreground mt-1">
-												{token.lastUsedAt ? (
-													<span>
-														Usado{" "}
-														{formatDistanceToNow(token.lastUsedAt, {
-															addSuffix: true,
-															locale: ptBR,
-														})}
-														{token.lastUsedIp && (
-															<span className="text-xs ml-1">
-																({token.lastUsedIp})
-															</span>
-														)}
-													</span>
-												) : (
-													<span>Nunca usado</span>
-												)}
-											</div>
-											<div className="text-xs text-muted-foreground mt-0.5">
-												Criado em{" "}
-												{new Date(token.createdAt).toLocaleDateString("pt-BR")}
-											</div>
-										</div>
-									</div>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="text-destructive hover:text-destructive hover:bg-destructive/10"
-										onClick={() => setRevokeId(token.id)}
-									>
-										<RiDeleteBinLine className="h-4 w-4" />
-									</Button>
 								</div>
-							</CardContent>
+								<div>
-						</Card>
+									<div className="flex items-center gap-2">
+										<span className="text-sm font-bold">{token.name}</span>
+										<Badge variant="outline" className="text-xs font-mono">
+											{token.tokenPrefix}...
+										</Badge>
+									</div>
+									<p className="text-xs text-muted-foreground py-1">
+										{token.lastUsedAt ? (
+											<>
+												Usado{" "}
+												{formatDistanceToNow(token.lastUsedAt, {
+													addSuffix: true,
+													locale: ptBR,
+												})}
+											</>
+										) : (
+											"Nunca usado"
+										)}
+										{" · "}
+										Criado em{" "}
+										{new Date(token.createdAt).toLocaleDateString("pt-BR")}
+									</p>
+								</div>
+							</div>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+								onClick={() => setRevokeId(token.id)}
+							>
+								<RiDeleteBinLine className="h-4 w-4" />
+							</Button>
+						</div>
 					))}
 				</div>
 			)}

components/ajustes/companion-tab.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import {
+	RiAndroidLine,
+	RiDownload2Line,
+	RiNotification3Line,
+	RiQrCodeLine,
+	RiShieldCheckLine,
+} from "@remixicon/react";
+import { Card } from "@/components/ui/card";
+import { ApiTokensForm } from "./api-tokens-form";
+
+interface ApiToken {
+	id: string;
+	name: string;
+	tokenPrefix: string;
+	lastUsedAt: Date | null;
+	lastUsedIp: string | null;
+	createdAt: Date;
+	expiresAt: Date | null;
+	revokedAt: Date | null;
+}
+
+interface CompanionTabProps {
+	tokens: ApiToken[];
+}
+
+const steps = [
+	{
+		icon: RiDownload2Line,
+		title: "Instale o app",
+		description: "Instale o APK.",
+	},
+	{
+		icon: RiQrCodeLine,
+		title: "Gere um token",
+		description: "Crie um token abaixo para autenticar.",
+	},
+	{
+		icon: RiNotification3Line,
+		title: "Configure permissões",
+		description: "Conceda acesso às notificações.",
+	},
+	{
+		icon: RiShieldCheckLine,
+		title: "Pronto!",
+		description: "Notificações serão enviadas ao OpenSheets.",
+	},
+];
+
+export function CompanionTab({ tokens }: CompanionTabProps) {
+	return (
+		<Card className="p-6">
+			<div className="space-y-6">
+				{/* Header */}
+				<div>
+					<div className="flex items-center gap-2 mb-1">
+						<h2 className="text-lg font-bold">OpenSheets Companion</h2>
+						<span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+							<RiAndroidLine className="h-3 w-3" />
+							Android
+						</span>
+					</div>
+					<p className="text-sm text-muted-foreground">
+						Capture notificações de transações dos seus apps de banco (Nubank,
+						Itaú, Bradesco, Inter, C6 e outros) e envie para sua caixa de
+						entrada.
+					</p>
+				</div>
+
+				{/* Steps */}
+				<div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">
+					{steps.map((step, index) => (
+						<div key={step.title} className="flex items-start gap-2">
+							<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+								<step.icon className="h-4 w-4" />
+							</div>
+							<div className="min-w-0">
+								<p className="text-sm font-medium leading-tight">
+									{index + 1}. {step.title}
+								</p>
+								<p className="text-xs text-muted-foreground">
+									{step.description}
+								</p>
+							</div>
+						</div>
+					))}
+				</div>
+
+				{/* Divider */}
+				<div className="border-t" />
+
+				{/* Devices */}
+				<ApiTokensForm tokens={tokens} />
+			</div>
+		</Card>
+	);
+}

components/pre-lancamentos/inbox-page.tsx

@@ -147,7 +147,7 @@ export function InboxPage({
 						<EmptyState
 							media={<RiInboxLine className="size-6 text-primary" />}
 							title="Nenhum pré-lançamento"
-							description="As notificações capturadas pelo app OpenSheets Companion aparecerão aqui para você processar."
+							description="As notificações capturadas pelo app OpenSheets Companion aparecerão aqui para você processar. Saiba mais sobre o app em Ajustes > Companion."
 						/>
 					</Card>
 				) : (

components/relatorios/cartoes/card-invoice-status.tsx

@@ -1,9 +1,15 @@
 "use client";
 
-import { RiBankCard2Fill } from "@remixicon/react";
+import { RiCalendarCheckLine } from "@remixicon/react";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import { cn } from "@/lib/utils";
 import { title_font } from "@/public/fonts/font_index";
 
 type CardInvoiceStatusProps = {
@@ -35,47 +41,35 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
 		}).format(value);
 	};
 
-	const getStatusBadge = (status: string | null) => {
+	const getStatusColor = (status: string | null) => {
 		switch (status) {
 			case "pago":
-				return (
+				return "bg-green-500";
-					<Badge
-						variant="outline"
-						className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
-					>
-						Pago
-					</Badge>
-				);
 			case "pendente":
-				return (
+				return "bg-yellow-500";
-					<Badge
-						variant="outline"
-						className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
-					>
-						Pendente
-					</Badge>
-				);
 			case "atrasado":
-				return (
+				return "bg-red-500";
-					<Badge
-						variant="outline"
-						className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
-					>
-						Atrasado
-					</Badge>
-				);
 			default:
-				return (
+				return "bg-muted";
-					<Badge variant="outline" className="text-muted-foreground">
-						—
-					</Badge>
-				);
 		}
 	};
 
-	const formatPeriod = (period: string) => {
+	const getStatusLabel = (status: string | null) => {
-		const [year, month] = period.split("-");
+		switch (status) {
-		return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`;
+			case "pago":
+				return "Pago";
+			case "pendente":
+				return "Pendente";
+			case "atrasado":
+				return "Atrasado";
+			default:
+				return "—";
+		}
+	};
+
+	const formatPeriodShort = (period: string) => {
+		const [, month] = period.split("-");
+		return monthLabels[parseInt(month, 10) - 1];
 	};
 
 	return (
@@ -84,29 +78,38 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
 				<CardTitle
 					className={`${title_font.className} flex items-center gap-1.5 text-base`}
 				>
-					<RiBankCard2Fill className="size-4 text-primary" />
+					<RiCalendarCheckLine className="size-4 text-primary" />
-					Status das Faturas
+					Faturas
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<div className="space-y-2">
+				<TooltipProvider>
-					{[...data].reverse().map((invoice) => (
+					<div className="flex items-center gap-1">
-						<div
+						{data.map((invoice) => (
-							key={invoice.period}
+							<Tooltip key={invoice.period}>
-							className="flex items-center justify-between py-2 border-b last:border-b-0"
+								<TooltipTrigger asChild>
-						>
+									<div className="flex-1 flex flex-col items-center gap-2 cursor-default">
-							<div className="flex items-center gap-3">
+										<div
-								<span className="text-sm font-medium w-16">
+											className={cn(
-									{formatPeriod(invoice.period)}
+												"w-full h-2.5 rounded",
-								</span>
+												getStatusColor(invoice.status),
-								{getStatusBadge(invoice.status)}
+											)}
-							</div>
+										/>
-							<span className="text-sm font-bold">
+										<span className="text-xs text-muted-foreground">
-								{formatCurrency(invoice.amount)}
+											{formatPeriodShort(invoice.period)}
-							</span>
+										</span>
-						</div>
+									</div>
-					))}
+								</TooltipTrigger>
-				</div>
+								<TooltipContent side="top">
+									<p className="font-medium">
+										{formatCurrency(invoice.amount)}
+									</p>
+									<p className="text-xs ">{getStatusLabel(invoice.status)}</p>
+								</TooltipContent>
+							</Tooltip>
+						))}
+					</div>
+				</TooltipProvider>
 			</CardContent>
 		</Card>
 	);

components/relatorios/cartoes/card-top-expenses.tsx

@@ -90,7 +90,7 @@ export function CardTopExpenses({ data }: CardTopExpensesProps) {
 								{/* Value */}
 								<div className="flex shrink-0 flex-col items-end">
 									<MoneyValues
-										className="text-red-600 dark:text-red-500"
+										className="text-foreground"
 										amount={expense.amount}
 									/>
 								</div>

components/relatorios/cartoes/card-usage-chart.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { RiBankCard2Line } from "@remixicon/react";
+import { RiBankCard2Line, RiBarChartBoxLine } from "@remixicon/react";
 import Image from "next/image";
-import { useState } from "react";
 import {
 	Bar,
 	BarChart,
@@ -11,15 +10,14 @@ import {
 	XAxis,
 	YAxis,
 } from "recharts";
-import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import {
 	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 } from "@/components/ui/chart";
 import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
-import { cn } from "@/lib/utils";
+import { title_font } from "@/public/fonts/font_index";
 
 type CardUsageChartProps = {
 	data: CardDetailData["monthlyUsage"];
@@ -37,14 +35,6 @@ const chartConfig = {
 	},
 } satisfies ChartConfig;
 
-type PeriodFilter = "3" | "6" | "12";
-
-const filterOptions: { value: PeriodFilter; label: string }[] = [
-	{ value: "3", label: "3 meses" },
-	{ value: "6", label: "6 meses" },
-	{ value: "12", label: "12 meses" },
-];
-
 const resolveLogoPath = (logo: string | null) => {
 	if (!logo) return null;
 	if (
@@ -58,8 +48,6 @@ const resolveLogoPath = (logo: string | null) => {
 };
 
 export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
-	const [period, setPeriod] = useState<PeriodFilter>("6");
-
 	const formatCurrency = (value: number) => {
 		return new Intl.NumberFormat("pt-BR", {
 			style: "currency",
@@ -82,10 +70,8 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
 		return formatCurrency(value);
 	};
 
-	// Filter data based on selected period
+	// Always show last 12 months
-	const filteredData = data.slice(-Number(period));
+	const chartData = data.slice(-12).map((item) => ({
-
-	const chartData = filteredData.map((item) => ({
 		month: item.periodLabel,
 		amount: item.amount,
 	}));
@@ -96,42 +82,29 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
 		<Card>
 			<CardHeader className="pb-2">
 				<div className="flex items-center justify-between">
-					{/* Card logo and name on the left */}
+					<CardTitle
+						className={`${title_font.className} flex items-center gap-1.5 text-base`}
+					>
+						<RiBarChartBoxLine className="size-4 text-primary" />
+						Histórico de Uso
+					</CardTitle>
+
+					{/* Card logo and name */}
 					<div className="flex items-center gap-2">
 						{logoPath ? (
-							<div className="flex size-10 shrink-0 items-center justify-center">
+							<Image
-								<Image
+								src={logoPath}
-									src={logoPath}
+								alt={card.name}
-									alt={`Logo ${card.name}`}
+								width={24}
-									width={32}
+								height={24}
-									height={32}
+								className="rounded object-contain"
-									className="rounded object-contain"
+							/>
-								/>
-							</div>
 						) : (
-							<div className="flex size-10 shrink-0 items-center justify-center">
+							<RiBankCard2Line className="size-5 text-muted-foreground" />
-								<RiBankCard2Line className="size-5 text-muted-foreground" />
-							</div>
 						)}
-						<span className="text-base font-semibold">{card.name}</span>
+						<span className="text-sm font-medium text-muted-foreground">
-					</div>
+							{card.name}
-
+						</span>
-					{/* Filters on the right */}
-					<div className="flex items-center gap-1">
-						{filterOptions.map((option) => (
-							<Button
-								key={option.value}
-								variant={period === option.value ? "default" : "outline"}
-								size="sm"
-								onClick={() => setPeriod(option.value)}
-								className={cn(
-									"h-7 text-xs",
-									period === option.value && "pointer-events-none",
-								)}
-							>
-								{option.label}
-							</Button>
-						))}
 					</div>
 				</div>
 			</CardHeader>

components/relatorios/cartoes/cards-overview.tsx

@@ -1,18 +1,14 @@
 "use client";
 
-import {
+import { RiBankCard2Line } from "@remixicon/react";
-	RiArrowDownLine,
-	RiArrowUpLine,
-	RiBankCard2Line,
-} from "@remixicon/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import MoneyValues from "@/components/money-values";
+import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
 import { cn } from "@/lib/utils";
-import { title_font } from "@/public/fonts/font_index";
 
 type CardsOverviewProps = {
 	data: CartoesReportData;
@@ -53,14 +49,13 @@ export function CardsOverview({ data }: CardsOverviewProps) {
 	const searchParams = useSearchParams();
 	const periodoParam = searchParams.get("periodo");
 
-	const formatCurrency = (value: number) => {
+	const formatCurrency = (value: number) =>
-		return new Intl.NumberFormat("pt-BR", {
+		new Intl.NumberFormat("pt-BR", {
 			style: "currency",
 			currency: "BRL",
 			minimumFractionDigits: 0,
 			maximumFractionDigits: 0,
 		}).format(value);
-	};
 
 	const getUsageColor = (percent: number) => {
 		if (percent < 50) return "bg-green-500";
@@ -75,155 +70,119 @@ export function CardsOverview({ data }: CardsOverviewProps) {
 		return `/relatorios/cartoes?${params.toString()}`;
 	};
 
+	const summaryCards = [
+		{ title: "Limite", value: data.totalLimit, isMoney: true },
+		{ title: "Usado", value: data.totalUsage, isMoney: true },
+		{
+			title: "Disponível",
+			value: data.totalLimit - data.totalUsage,
+			isMoney: true,
+		},
+		{ title: "Utilização", value: data.totalUsagePercent, isMoney: false },
+	];
+
 	if (data.cards.length === 0) {
 		return (
 			<Card>
-				<CardHeader className="pb-2">
+				<CardContent className="flex flex-col items-center justify-center py-10 text-muted-foreground">
-					<CardTitle className="text-base font-bold flex items-center gap-2">
+					<RiBankCard2Line className="size-8 mb-2" />
-						<RiBankCard2Line className="size-4" />
+					<p className="text-sm">Nenhum cartão encontrado</p>
-						Resumo dos Cartões
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-						<RiBankCard2Line className="size-8 mb-2" />
-						<p className="text-sm">Nenhum cartão ativo encontrado</p>
-					</div>
 				</CardContent>
 			</Card>
 		);
 	}
 
 	return (
-		<Card>
+		<div className="space-y-3">
-			<CardHeader className="pb-2">
+			{/* Summary stats */}
-				<CardTitle
+			<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
-					className={`${title_font.className} flex items-center gap-1.5 text-base`}
+				{summaryCards.map((card) => (
-				>
+					<Card key={card.title}>
-					<RiBankCard2Line className="size-4 text-primary" />
+						<CardContent className="px-4 py-2">
-					Resumo dos Cartões
+							<p className="text-xs text-muted-foreground mb-1">{card.title}</p>
-				</CardTitle>
+							{card.isMoney ? (
-			</CardHeader>
+								<MoneyValues
-			<CardContent className="space-y-4">
+									className="text-2xl font-semibold"
-				<div className="grid gap-3 sm:grid-cols-3">
+									amount={card.value}
-					<div className="p-3 rounded-lg border bg-muted/30">
+								/>
-						<p className="text-xs text-muted-foreground">Limite Total</p>
+							) : (
-						<p className="text-lg font-semibold">
+								<p className="text-2xl font-semibold">
-							{formatCurrency(data.totalLimit)}
+									{card.value.toFixed(0)}%
-						</p>
+								</p>
-					</div>
+							)}
-					<div className="p-3 rounded-lg border bg-muted/30">
+						</CardContent>
-						<p className="text-xs text-muted-foreground">Uso Total</p>
+					</Card>
-						<p className="text-lg font-semibold">
+				))}
-							{formatCurrency(data.totalUsage)}
+			</div>
-						</p>
-					</div>
-					<div className="p-3 rounded-lg border bg-muted/30">
-						<p className="text-xs text-muted-foreground">Utilização</p>
-						<p className="text-lg font-semibold">
-							{data.totalUsagePercent.toFixed(0)}%
-						</p>
-					</div>
-				</div>
 
-				<div className="flex flex-col">
+			<p className="text-base font-bold ml-2">Meus cartões</p>
-					{data.cards.map((card) => {
-						const logoPath = resolveLogoPath(card.logo);
-						const brandAsset = resolveBrandAsset(card.brand);
 
-						return (
+			{/* Cards list */}
+			<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+				{data.cards.map((card) => {
+					const logoPath = resolveLogoPath(card.logo);
+					const brandAsset = resolveBrandAsset(card.brand);
+					const isSelected = data.selectedCard?.card.id === card.id;
+
+					return (
+						<Card
+							key={card.id}
+							className={cn("px-1 py-4", isSelected && "ring-1 ring-primary")}
+						>
 							<Link
-								key={card.id}
 								href={buildUrl(card.id)}
-								className={cn(
+								className={cn("flex items-center gap-3 p-3")}
-									"flex flex-col py-2 border-b border-dashed last:border-0 transition-colors hover:bg-muted/50",
-									data.selectedCard?.card.id === card.id && "bg-muted/30",
-								)}
 							>
-								<div className="flex items-center justify-between gap-3">
+								<div className="flex size-9 shrink-0 items-center justify-center">
-									<div className="flex min-w-0 flex-1 items-center gap-2">
+									{logoPath ? (
-										{/* Logo container - size-10 like expenses-by-category */}
+										<Image
-										<div className="flex size-10 shrink-0 items-center justify-center">
+											src={logoPath}
-											{logoPath ? (
+											alt={card.name}
-												<Image
+											width={32}
-													src={logoPath}
+											height={32}
-													alt={`Logo ${card.name}`}
+											className="rounded object-contain"
-													width={28}
+										/>
-													height={28}
+									) : (
-													className="rounded object-contain"
+										<RiBankCard2Line className="size-5 text-muted-foreground" />
-												/>
+									)}
-											) : (
+								</div>
-												<RiBankCard2Line className="size-4 text-muted-foreground" />
+								<div className="min-w-0 flex-1 space-y-1">
-											)}
+									<div className="flex items-center gap-2">
-										</div>
+										<span className="text-base font-bold truncate">
-
+											{card.name}
-										{/* Name and brand */}
+										</span>
-										<div className="min-w-0 flex-1">
+										{brandAsset && (
-											<div className="flex items-center gap-2">
+											<Image
-												<span className="text-sm font-medium truncate">
+												src={brandAsset}
-													{card.name}
+												alt={card.brand || ""}
-												</span>
+												width={18}
-												{brandAsset && (
+												height={12}
-													<Image
+												className="h-2.5 w-auto shrink-0 opacity-70"
-														src={brandAsset}
+											/>
-														alt={`Bandeira ${card.brand}`}
+										)}
-														width={24}
-														height={16}
-														className="h-2.5 w-auto shrink-0"
-													/>
-												)}
-											</div>
-											<div className="flex items-center gap-2 text-xs text-muted-foreground">
-												<span>
-													{formatCurrency(card.currentUsage)} /{" "}
-													{formatCurrency(card.limit)}
-												</span>
-											</div>
-										</div>
 									</div>
-
+									<p className="text-xs text-muted-foreground tabular-nums">
-									{/* Trend and percentage */}
+										{formatCurrency(card.currentUsage)} /{" "}
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
+										{formatCurrency(card.limit)}
-										<span className="text-sm font-medium">
+									</p>
+									<div className="flex items-center gap-2">
+										<Progress
+											value={Math.min(card.usagePercent, 100)}
+											className={cn(
+												"h-2 flex-1",
+												`[&>div]:${getUsageColor(card.usagePercent)}`,
+											)}
+										/>
+										<span className="text-xs font-medium tabular-nums">
 											{card.usagePercent.toFixed(0)}%
 										</span>
-										<div className="flex items-center gap-1">
-											{card.trend === "up" && (
-												<RiArrowUpLine className="size-3 text-red-500" />
-											)}
-											{card.trend === "down" && (
-												<RiArrowDownLine className="size-3 text-green-500" />
-											)}
-											<span
-												className={cn(
-													"text-xs",
-													card.trend === "up" && "text-red-500",
-													card.trend === "down" && "text-green-500",
-													card.trend === "stable" && "text-muted-foreground",
-												)}
-											>
-												{card.changePercent > 0 ? "+" : ""}
-												{card.changePercent.toFixed(0)}%
-											</span>
-										</div>
 									</div>
 								</div>
-
-								{/* Progress bar - aligned with content */}
-								<div className="ml-12 mt-1.5">
-									<Progress
-										value={Math.min(card.usagePercent, 100)}
-										className={cn(
-											"h-1.5",
-											`[&>div]:${getUsageColor(card.usagePercent)}`,
-										)}
-									/>
-								</div>
 							</Link>
-						);
+						</Card>
-					})}
+					);
-				</div>
+				})}
-			</CardContent>
+			</div>
-		</Card>
+		</div>
 	);
 }

components/top-estabelecimentos/establishments-list.tsx

@@ -105,7 +105,7 @@ export function EstablishmentsList({
 									{/* Value and stats */}
 									<div className="flex shrink-0 flex-col items-end gap-0.5">
 										<MoneyValues
-											className="text-red-600 dark:text-red-500"
+											className="text-foreground"
 											amount={establishment.totalAmount}
 										/>
 										<span className="text-xs text-muted-foreground">

components/top-estabelecimentos/highlights-cards.tsx

@@ -11,17 +11,17 @@ type HighlightsCardsProps = {
 export function HighlightsCards({ summary }: HighlightsCardsProps) {
 	return (
 		<div className="grid gap-3 sm:grid-cols-2">
-			<Card className="bg-linear-to-br from-amber-50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/10 border-amber-200/50 dark:border-amber-800/30">
+			<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-amber-100 dark:bg-amber-900/40 shadow-sm">
+						<div className="flex items-center justify-center size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40">
-							<RiTrophyLine className="size-5 text-amber-600 dark:text-amber-400" />
+							<RiTrophyLine className="size-5 text-violet-600 dark:text-violet-400" />
 						</div>
 						<div className="min-w-0 flex-1">
-							<p className="text-xs text-amber-700/80 dark:text-amber-400/80 font-medium">
+							<p className="text-xs text-violet-700/80 dark:text-violet-400/80 font-medium">
 								Mais Frequente
 							</p>
-							<p className="font-semibold text-amber-900 dark:text-amber-100 truncate">
+							<p className="font-bold text-xl text-violet-900 dark:text-violet-100 truncate">
 								{summary.mostFrequent || "—"}
 							</p>
 						</div>
@@ -29,17 +29,17 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
 				</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 border-red-200/50 dark:border-red-800/30">
+			<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 shadow-sm">
+						<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-semibold text-red-900 dark:text-red-100 truncate">
+							<p className="font-bold text-xl text-red-900 dark:text-red-100 truncate">
 								{summary.highestSpending || "—"}
 							</p>
 						</div>

components/top-estabelecimentos/summary-cards.tsx

@@ -50,7 +50,7 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
 		<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
 			{cards.map((card) => (
 				<Card key={card.title}>
-					<CardContent className="p-4">
+					<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">
@@ -58,11 +58,11 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
 								</p>
 								{card.isMoney ? (
 									<MoneyValues
-										className="text-xl font-semibold"
+										className="text-2xl font-semibold"
 										amount={card.value}
 									/>
 								) : (
-									<p className="text-xl font-semibold">{card.value}</p>
+									<p className="text-2xl font-semibold">{card.value}</p>
 								)}
 								<p className="text-xs text-muted-foreground">
 									{card.description}