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)/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">
-			<div className="flex flex-col gap-1">
-				<Skeleton className="h-8 w-48" />
-				<Skeleton className="h-4 w-96" />
+		<main className="flex flex-col gap-4">
+			{/* MonthNavigation skeleton */}
+			<Skeleton className="h-10 w-64" />
+
+			{/* 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">
-				<div className="lg:col-span-1">
-					<Card>
-						<CardHeader className="pb-2">
-							<Skeleton className="h-5 w-40" />
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="grid gap-3 sm:grid-cols-3">
-								<Skeleton className="h-16 w-full" />
-								<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>
+			{/* CardUsageChart */}
+			<Card>
+				<CardHeader className="pb-2">
+					<div className="flex items-center justify-between">
+						<Skeleton className="h-5 w-32" />
+						<div className="flex items-center gap-2">
+							<Skeleton className="size-6 rounded" />
+							<Skeleton className="h-4 w-24" />
+						</div>
 					</div>
+				</CardHeader>
+				<CardContent>
+					<Skeleton className="h-[280px] w-full" />
+				</CardContent>
+			</Card>
 
-					<Card>
-						<CardHeader className="pb-2">
-							<Skeleton className="h-5 w-40" />
-						</CardHeader>
-						<CardContent className="space-y-2">
-							{[1, 2, 3, 4, 5, 6].map((i) => (
-								<Skeleton key={i} className="h-10 w-full" />
-							))}
-						</CardContent>
-					</Card>
-				</div>
+			{/* CategoryBreakdown + TopExpenses */}
+			<div className="grid gap-4 md:grid-cols-2">
+				<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>
+
+				<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>
 	);
 }