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/top-estabelecimentos/top-categories.tsx

@@ -1,16 +1,11 @@
 "use client";
 
 import { RiPriceTag3Line } from "@remixicon/react";
+import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
 import MoneyValues from "@/components/money-values";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
-import {
-	buildCategoryInitials,
-	getCategoryBgColor,
-	getCategoryColor,
-} from "@/lib/utils/category-colors";
-import { getIconComponent } from "@/lib/utils/icons";
 import { title_font } from "@/public/fonts/font_index";
 import { Progress } from "../ui/progress";
 
@@ -56,12 +51,6 @@ export function TopCategories({ categories }: TopCategoriesProps) {
 			<CardContent className="pt-0">
 				<div className="flex flex-col">
 					{categories.map((category, index) => {
-						const IconComponent = category.icon
-							? getIconComponent(category.icon)
-							: null;
-						const color = getCategoryColor(index);
-						const bgColor = getCategoryBgColor(index);
-						const initials = buildCategoryInitials(category.name);
 						const percent =
 							totalAmount > 0 ? (category.totalAmount / totalAmount) * 100 : 0;
 
@@ -72,21 +61,11 @@ export function TopCategories({ categories }: TopCategoriesProps) {
 							>
 								<div className="flex items-center justify-between gap-3">
 									<div className="flex min-w-0 flex-1 items-center gap-2">
-										<div
-											className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
-											style={{ backgroundColor: bgColor }}
-										>
-											{IconComponent ? (
-												<IconComponent className="size-4" style={{ color }} />
-											) : (
-												<span
-													className="text-xs font-semibold uppercase"
-													style={{ color }}
-												>
-													{initials}
-												</span>
-											)}
-										</div>
+										<CategoryIconBadge
+											icon={category.icon}
+											name={category.name}
+											colorIndex={index}
+										/>
 
 										{/* Name and percentage */}
 										<div className="min-w-0 flex-1">
@@ -110,7 +89,7 @@ export function TopCategories({ categories }: TopCategoriesProps) {
 								</div>
 
 								{/* Progress bar */}
-								<div className="ml-12 mt-1.5">
+								<div className="ml-11 mt-1.5">
 									<Progress className="h-1.5" value={percent} />
 								</div>
 							</div>