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-category-breakdown.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import { getIconComponent } from "@/lib/utils/icons";
+import { RiPieChartLine } from "@remixicon/react";
+
+type CardCategoryBreakdownProps = {
+  data: CardDetailData["categoryBreakdown"];
+};
+
+const COLORS = [
+  "#ef4444",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+  "#6366f1",
+  "#84cc16",
+];
+
+export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  };
+
+  if (data.length === 0) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-medium">
+            Gastos por Categoria
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+            <RiPieChartLine className="size-8 mb-2" />
+            <p className="text-sm">Nenhum gasto neste período</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">
+          Gastos por Categoria
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {data.map((category, index) => {
+          const IconComponent = category.icon
+            ? getIconComponent(category.icon)
+            : null;
+          const color = COLORS[index % COLORS.length];
+
+          return (
+            <div key={category.id} className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  {IconComponent ? (
+                    <IconComponent
+                      className="size-4"
+                      style={{ color }}
+                    />
+                  ) : (
+                    <div
+                      className="size-4 rounded-sm"
+                      style={{ backgroundColor: color }}
+                    />
+                  )}
+                  <span className="text-sm font-medium truncate max-w-[150px]">
+                    {category.name}
+                  </span>
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  {formatCurrency(category.amount)}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full rounded-full transition-all"
+                    style={{
+                      width: `${category.percent}%`,
+                      backgroundColor: color,
+                    }}
+                  />
+                </div>
+                <span className="text-xs text-muted-foreground w-10 text-right">
+                  {category.percent.toFixed(0)}%
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}