feat(relatorios): adicionar página de relatório de cartões

- Criar página /relatorios/cartoes com visão geral dos cartões
- Adicionar componentes: cards-overview, card-usage-chart, card-top-expenses
- Adicionar componentes: card-category-breakdown, card-invoice-status
- Criar função de busca de dados para relatório de cartões

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/(dashboard)/relatorios/cartoes/loading.tsx

@@ -0,0 +1,85 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+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" />
+      </div>
+
+      <Skeleton className="h-10 w-full max-w-md" />
+
+      <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>
+          </div>
+
+          <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>
+      </div>
+    </main>
+  );
+}

app/(dashboard)/relatorios/cartoes/page.tsx

@@ -0,0 +1,96 @@
+import { CardCategoryBreakdown } from "@/components/relatorios/cartoes/card-category-breakdown";
+import { CardInvoiceStatus } from "@/components/relatorios/cartoes/card-invoice-status";
+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 MonthNavigation from "@/components/month-picker/month-navigation";
+import { getUser } from "@/lib/auth/server";
+import { fetchCartoesReportData } from "@/lib/relatorios/cartoes-report";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { RiBankCard2Line } from "@remixicon/react";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string,
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? (value[0] ?? null) : value;
+};
+
+export default async function RelatorioCartoesPage({
+  searchParams,
+}: PageProps) {
+  const user = await getUser();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+  const cartaoParam = getSingleParam(resolvedSearchParams, "cartao");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+  const data = await fetchCartoesReportData(
+    user.id,
+    selectedPeriod,
+    cartaoParam,
+  );
+
+  return (
+    <main className="flex flex-col gap-4 px-6">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Relatório de Cartões
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Análise detalhada do uso dos seus cartões de crédito.
+        </p>
+      </div>
+
+      <MonthNavigation />
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <div className="lg:col-span-1">
+          <CardsOverview data={data} />
+        </div>
+
+        <div className="lg:col-span-2 space-y-4">
+          {data.selectedCard ? (
+            <>
+              <div className="flex items-center gap-2 pb-2 border-b">
+                <h2 className="text-lg font-semibold">
+                  {data.selectedCard.card.name}
+                </h2>
+              </div>
+
+              <CardUsageChart
+                data={data.selectedCard.monthlyUsage}
+                limit={data.selectedCard.card.limit}
+              />
+
+              <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} />
+            </>
+          ) : (
+            <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>
+    </main>
+  );
+}