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>

components/relatorios/cartoes/card-usage-chart.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis, ReferenceLine } from "recharts";
+
+type CardUsageChartProps = {
+  data: CardDetailData["monthlyUsage"];
+  limit: number;
+};
+
+const chartConfig = {
+  amount: {
+    label: "Uso",
+    color: "#3b82f6",
+  },
+} satisfies ChartConfig;
+
+export function CardUsageChart({ data, limit }: CardUsageChartProps) {
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const formatCurrencyCompact = (value: number) => {
+    if (Math.abs(value) >= 1000) {
+      return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency: "BRL",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+        notation: "compact",
+      }).format(value);
+    }
+    return formatCurrency(value);
+  };
+
+  const chartData = data.map((item) => ({
+    month: item.periodLabel,
+    amount: item.amount,
+  }));
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">
+          Uso Mensal (6 meses)
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-[280px] w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              className="text-xs"
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              className="text-xs"
+              tickFormatter={formatCurrencyCompact}
+            />
+            {limit > 0 && (
+              <ReferenceLine
+                y={limit}
+                stroke="#ef4444"
+                strokeDasharray="3 3"
+                label={{
+                  value: "Limite",
+                  position: "right",
+                  className: "text-xs fill-red-500",
+                }}
+              />
+            )}
+            <ChartTooltip
+              content={({ active, payload }) => {
+                if (!active || !payload || payload.length === 0) {
+                  return null;
+                }
+
+                const data = payload[0].payload;
+                const value = data.amount as number;
+                const usagePercent = limit > 0 ? (value / limit) * 100 : 0;
+
+                return (
+                  <div className="rounded-lg border bg-background p-3 shadow-lg">
+                    <div className="mb-2 text-xs font-medium text-muted-foreground">
+                      {data.month}
+                    </div>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between gap-4">
+                        <span className="text-xs text-muted-foreground">
+                          Uso
+                        </span>
+                        <span className="text-xs font-medium tabular-nums">
+                          {formatCurrency(value)}
+                        </span>
+                      </div>
+                      {limit > 0 && (
+                        <div className="flex items-center justify-between gap-4">
+                          <span className="text-xs text-muted-foreground">
+                            % do Limite
+                          </span>
+                          <span className="text-xs font-medium tabular-nums">
+                            {usagePercent.toFixed(0)}%
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              }}
+              cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }}
+            />
+            <Bar
+              dataKey="amount"
+              fill="#3b82f6"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={50}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}