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">
-					<Card className="p-6">
-						<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 value="companion" className="mt-4">
+					<CompanionTab tokens={userApiTokens} />
 				</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">
-			<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>
 	);
 }

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">
-				<div className="lg:col-span-1">
-					<CardsOverview data={data} />
-				</div>
+			<CardsOverview data={data} />
 
-				<div className="lg:col-span-2 space-y-4">
-					{data.selectedCard ? (
-						<>
-							<CardUsageChart
-								data={data.selectedCard.monthlyUsage}
-								limit={data.selectedCard.card.limit}
-								card={{
-									name: data.selectedCard.card.name,
-									logo: data.selectedCard.card.logo,
-								}}
-							/>
+			{data.selectedCard ? (
+				<>
+					<CardUsageChart
+						data={data.selectedCard.monthlyUsage}
+						limit={data.selectedCard.card.limit}
+						card={{
+							name: data.selectedCard.card.name,
+							logo: data.selectedCard.card.logo,
+						}}
+					/>
 
-							<div className="grid gap-4 md:grid-cols-2">
-								<CardCategoryBreakdown
-									data={data.selectedCard.categoryBreakdown}
-								/>
-								<CardTopExpenses data={data.selectedCard.topExpenses} />
-							</div>
+					<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
 
-							<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
-						</>
-					) : (
-						<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-							<RiBankCard2Line className="size-12 mb-4" />
-							<p className="text-lg font-medium">Nenhum cartão selecionado</p>
-							<p className="text-sm">
-								Selecione um cartão na lista ao lado para ver detalhes.
-							</p>
-						</div>
-					)}
-				</div>
-			</div>
+					<div className="grid gap-4 md:grid-cols-2">
+						<CardCategoryBreakdown data={data.selectedCard.categoryBreakdown} />
+						<CardTopExpenses data={data.selectedCard.topExpenses} />
+					</div>
+				</>
+			) : (
+				<Card className="flex flex-col items-center justify-center py-16 text-center">
+					<div className="flex size-14 items-center justify-center rounded-full bg-muted mb-4">
+						<RiBankCard2Line className="size-7 text-muted-foreground" />
+					</div>
+					<p className="text-base font-medium">Nenhum cartão selecionado</p>
+					<p className="text-sm text-muted-foreground mt-1">
+						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="@3xl/main:col-span-2">
+			<div className="grid grid-cols-2 gap-4">
+				<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);