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-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>