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>

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

@@ -1,9 +1,15 @@
 "use client";
 
-import { RiBankCard2Fill } from "@remixicon/react";
-import { Badge } from "@/components/ui/badge";
+import { RiCalendarCheckLine } from "@remixicon/react";
 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 (
-					<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>
-				);
+				return "bg-green-500";
 			case "pendente":
-				return (
-					<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>
-				);
+				return "bg-yellow-500";
 			case "atrasado":
-				return (
-					<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>
-				);
+				return "bg-red-500";
 			default:
-				return (
-					<Badge variant="outline" className="text-muted-foreground">
-						—
-					</Badge>
-				);
+				return "bg-muted";
 		}
 	};
 
-	const formatPeriod = (period: string) => {
-		const [year, month] = period.split("-");
-		return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`;
+	const getStatusLabel = (status: string | null) => {
+		switch (status) {
+			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" />
-					Status das Faturas
+					<RiCalendarCheckLine className="size-4 text-primary" />
+					Faturas
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<div className="space-y-2">
-					{[...data].reverse().map((invoice) => (
-						<div
-							key={invoice.period}
-							className="flex items-center justify-between py-2 border-b last:border-b-0"
-						>
-							<div className="flex items-center gap-3">
-								<span className="text-sm font-medium w-16">
-									{formatPeriod(invoice.period)}
-								</span>
-								{getStatusBadge(invoice.status)}
-							</div>
-							<span className="text-sm font-bold">
-								{formatCurrency(invoice.amount)}
-							</span>
-						</div>
-					))}
-				</div>
+				<TooltipProvider>
+					<div className="flex items-center gap-1">
+						{data.map((invoice) => (
+							<Tooltip key={invoice.period}>
+								<TooltipTrigger asChild>
+									<div className="flex-1 flex flex-col items-center gap-2 cursor-default">
+										<div
+											className={cn(
+												"w-full h-2.5 rounded",
+												getStatusColor(invoice.status),
+											)}
+										/>
+										<span className="text-xs text-muted-foreground">
+											{formatPeriodShort(invoice.period)}
+										</span>
+									</div>
+								</TooltipTrigger>
+								<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 } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } 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
-	const filteredData = data.slice(-Number(period));
-
-	const chartData = filteredData.map((item) => ({
+	// Always show last 12 months
+	const chartData = data.slice(-12).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
-									src={logoPath}
-									alt={`Logo ${card.name}`}
-									width={32}
-									height={32}
-									className="rounded object-contain"
-								/>
-							</div>
+							<Image
+								src={logoPath}
+								alt={card.name}
+								width={24}
+								height={24}
+								className="rounded object-contain"
+							/>
 						) : (
-							<div className="flex size-10 shrink-0 items-center justify-center">
-								<RiBankCard2Line className="size-5 text-muted-foreground" />
-							</div>
+							<RiBankCard2Line className="size-5 text-muted-foreground" />
 						)}
-						<span className="text-base font-semibold">{card.name}</span>
-					</div>
-
-					{/* 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>
-						))}
+						<span className="text-sm font-medium text-muted-foreground">
+							{card.name}
+						</span>
 					</div>
 				</div>
 			</CardHeader>

components/relatorios/cartoes/cards-overview.tsx

@@ -1,18 +1,14 @@
 "use client";
 
-import {
-	RiArrowDownLine,
-	RiArrowUpLine,
-	RiBankCard2Line,
-} from "@remixicon/react";
+import { 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) => {
-		return new Intl.NumberFormat("pt-BR", {
+	const formatCurrency = (value: number) =>
+		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">
-					<CardTitle className="text-base font-bold flex items-center gap-2">
-						<RiBankCard2Line className="size-4" />
-						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 className="flex flex-col items-center justify-center py-10 text-muted-foreground">
+					<RiBankCard2Line className="size-8 mb-2" />
+					<p className="text-sm">Nenhum cartão encontrado</p>
 				</CardContent>
 			</Card>
 		);
 	}
 
 	return (
-		<Card>
-			<CardHeader className="pb-2">
-				<CardTitle
-					className={`${title_font.className} flex items-center gap-1.5 text-base`}
-				>
-					<RiBankCard2Line className="size-4 text-primary" />
-					Resumo dos Cartões
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				<div className="grid gap-3 sm:grid-cols-3">
-					<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">
-							{formatCurrency(data.totalLimit)}
-						</p>
-					</div>
-					<div className="p-3 rounded-lg border bg-muted/30">
-						<p className="text-xs text-muted-foreground">Uso Total</p>
-						<p className="text-lg font-semibold">
-							{formatCurrency(data.totalUsage)}
-						</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="space-y-3">
+			{/* Summary stats */}
+			<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+				{summaryCards.map((card) => (
+					<Card key={card.title}>
+						<CardContent className="px-4 py-2">
+							<p className="text-xs text-muted-foreground mb-1">{card.title}</p>
+							{card.isMoney ? (
+								<MoneyValues
+									className="text-2xl font-semibold"
+									amount={card.value}
+								/>
+							) : (
+								<p className="text-2xl font-semibold">
+									{card.value.toFixed(0)}%
+								</p>
+							)}
+						</CardContent>
+					</Card>
+				))}
+			</div>
 
-				<div className="flex flex-col">
-					{data.cards.map((card) => {
-						const logoPath = resolveLogoPath(card.logo);
-						const brandAsset = resolveBrandAsset(card.brand);
+			<p className="text-base font-bold ml-2">Meus cartões</p>
 
-						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(
-									"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",
-								)}
+								className={cn("flex items-center gap-3 p-3")}
 							>
-								<div className="flex items-center justify-between gap-3">
-									<div className="flex min-w-0 flex-1 items-center gap-2">
-										{/* Logo container - size-10 like expenses-by-category */}
-										<div className="flex size-10 shrink-0 items-center justify-center">
-											{logoPath ? (
-												<Image
-													src={logoPath}
-													alt={`Logo ${card.name}`}
-													width={28}
-													height={28}
-													className="rounded object-contain"
-												/>
-											) : (
-												<RiBankCard2Line className="size-4 text-muted-foreground" />
-											)}
-										</div>
-
-										{/* Name and brand */}
-										<div className="min-w-0 flex-1">
-											<div className="flex items-center gap-2">
-												<span className="text-sm font-medium truncate">
-													{card.name}
-												</span>
-												{brandAsset && (
-													<Image
-														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 className="flex size-9 shrink-0 items-center justify-center">
+									{logoPath ? (
+										<Image
+											src={logoPath}
+											alt={card.name}
+											width={32}
+											height={32}
+											className="rounded object-contain"
+										/>
+									) : (
+										<RiBankCard2Line className="size-5 text-muted-foreground" />
+									)}
+								</div>
+								<div className="min-w-0 flex-1 space-y-1">
+									<div className="flex items-center gap-2">
+										<span className="text-base font-bold truncate">
+											{card.name}
+										</span>
+										{brandAsset && (
+											<Image
+												src={brandAsset}
+												alt={card.brand || ""}
+												width={18}
+												height={12}
+												className="h-2.5 w-auto shrink-0 opacity-70"
+											/>
+										)}
 									</div>
-
-									{/* Trend and percentage */}
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
-										<span className="text-sm font-medium">
+									<p className="text-xs text-muted-foreground tabular-nums">
+										{formatCurrency(card.currentUsage)} /{" "}
+										{formatCurrency(card.limit)}
+									</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>
-						);
-					})}
-				</div>
-			</CardContent>
-		</Card>
+						</Card>
+					);
+				})}
+			</div>
+		</div>
 	);
 }