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/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>
+	);
+}