feat(relatorios): reorganizar páginas e criar componente CategoryIconBadge

- Renomear /relatorios/categorias para /relatorios/tendencias
- Renomear /relatorios/cartoes para /relatorios/uso-cartoes
- Criar componente CategoryIconBadge unificado com cores dinâmicas
- Atualizar cards de categorias com novo layout (ações no footer)
- Atualizar cards de orçamentos com CategoryIconBadge
- Adicionar tooltip detalhado nas células de tendências (valor anterior e diferença)
- Adicionar dot colorido (verde/vermelho) para indicar tipo de categoria

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

components/relatorios/category-report-table.tsx

@@ -1,110 +1,49 @@
 "use client";
 
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { CategoryReportData } from "@/lib/relatorios/types";
-import { formatCurrency, formatPeriodLabel } from "@/lib/relatorios/utils";
-import { getIconComponent } from "@/lib/utils/icons";
-import DotIcon from "../dot-icon";
-import { Card } from "../ui/card";
-import { CategoryCell } from "./category-cell";
+import { useMemo } from "react";
+import type { CategoryReportData, CategoryReportItem } from "@/lib/relatorios/types";
+import { CategoryTable } from "./category-table";
 
 interface CategoryReportTableProps {
 	data: CategoryReportData;
 }
 
 export function CategoryReportTable({ data }: CategoryReportTableProps) {
-	const { categories, periods, totals, grandTotal } = data;
+	const { categories, periods } = data;
+
+	// Separate categories by type
+	const { receitas, despesas } = useMemo(() => {
+		const receitas: CategoryReportItem[] = [];
+		const despesas: CategoryReportItem[] = [];
+
+		for (const category of categories) {
+			if (category.type === "receita") {
+				receitas.push(category);
+			} else {
+				despesas.push(category);
+			}
+		}
+
+		return { receitas, despesas };
+	}, [categories]);
 
 	return (
-		<Card className="px-6 py-4">
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead className="w-[280px] min-w-[280px] font-bold">
-							Categoria
-						</TableHead>
-						{periods.map((period) => (
-							<TableHead
-								key={period}
-								className="text-right min-w-[120px] font-bold"
-							>
-								{formatPeriodLabel(period)}
-							</TableHead>
-						))}
-						<TableHead className="text-right min-w-[120px] font-bold">
-							Total
-						</TableHead>
-					</TableRow>
-				</TableHeader>
+		<div className="flex flex-col gap-6">
+			{/* Despesas Table */}
+			<CategoryTable
+				title="Despesas"
+				categories={despesas}
+				periods={periods}
+				colorIndexOffset={0}
+			/>
 
-				<TableBody>
-					{categories.map((category) => {
-						const Icon = category.icon ? getIconComponent(category.icon) : null;
-						const isReceita = category.type.toLowerCase() === "receita";
-						const dotColor = isReceita
-							? "bg-green-600 dark:bg-green-400"
-							: "bg-red-600 dark:bg-red-400";
-
-						return (
-							<TableRow key={category.categoryId}>
-								<TableCell>
-									<div className="flex items-center gap-2">
-										<DotIcon bg_dot={dotColor} />
-										{Icon && <Icon className="h-4 w-4 shrink-0" />}
-										<span className="font-bold truncate">{category.name}</span>
-									</div>
-								</TableCell>
-								{periods.map((period, periodIndex) => {
-									const monthData = category.monthlyData.get(period);
-									const isFirstMonth = periodIndex === 0;
-
-									return (
-										<TableCell key={period} className="text-right">
-											<CategoryCell
-												value={monthData?.amount ?? 0}
-												previousValue={monthData?.previousAmount ?? 0}
-												categoryType={category.type}
-												isFirstMonth={isFirstMonth}
-											/>
-										</TableCell>
-									);
-								})}
-								<TableCell className="text-right font-semibold">
-									{formatCurrency(category.total)}
-								</TableCell>
-							</TableRow>
-						);
-					})}
-				</TableBody>
-
-				<TableFooter>
-					<TableRow>
-						<TableCell className="min-h-[2.5rem]">Total Geral</TableCell>
-						{periods.map((period) => {
-							const periodTotal = totals.get(period) ?? 0;
-							return (
-								<TableCell
-									key={period}
-									className="text-right font-semibold min-h-8"
-								>
-									{formatCurrency(periodTotal)}
-								</TableCell>
-							);
-						})}
-						<TableCell className="text-right font-semibold min-h-8">
-							{formatCurrency(grandTotal)}
-						</TableCell>
-					</TableRow>
-				</TableFooter>
-			</Table>
-		</Card>
+			{/* Receitas Table */}
+			<CategoryTable
+				title="Receitas"
+				categories={receitas}
+				periods={periods}
+				colorIndexOffset={despesas.length}
+			/>
+		</div>
 	);
 }