feat(ui): padroniza avatares e paleta visual da interface

src/features/reports/components/cards/card-category-breakdown.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { RiPieChartLine } from "@remixicon/react";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import type { CardDetailData } from "@/features/reports/cards-report-queries";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
 	Card,
@@ -61,7 +61,6 @@ export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
 									<CategoryIconBadge
 										icon={category.icon}
 										name={category.name}
-										colorIndex={index}
 									/>
 
 									{/* Name and percentage */}

src/features/reports/components/category-report-cards.tsx

@@ -2,8 +2,8 @@
 
 import Link from "next/link";
 import { useMemo } from "react";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import { formatPeriodLabel } from "@/features/reports/utils";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import {
 	Card,
 	CardContent,
@@ -26,15 +26,9 @@ interface CategoryCardProps {
 	category: CategoryReportItem;
 	periods: string[];
 	periodCount: number;
-	colorIndex: number;
 }
 
-function CategoryCard({
-	category,
-	periods,
-	periodCount,
-	colorIndex,
-}: CategoryCardProps) {
+function CategoryCard({ category, periods, periodCount }: CategoryCardProps) {
 	const periodParam = formatPeriodForUrl(periods[periods.length - 1]);
 	const averageMonthlyTotal = category.total / periodCount;
 
@@ -42,11 +36,7 @@ function CategoryCard({
 		<Card>
 			<CardHeader className="pb-3">
 				<CardTitle className="flex items-center gap-3">
-					<CategoryIconBadge
-						icon={category.icon}
-						name={category.name}
-						colorIndex={colorIndex}
-					/>
+					<CategoryIconBadge icon={category.icon} name={category.name} />
 					<Link
 						href={`/categories/${category.categoryId}?periodo=${periodParam}`}
 						className="flex-1 truncate hover:underline underline-offset-2"
@@ -95,7 +85,6 @@ interface SectionProps {
 	categories: CategoryReportItem[];
 	periods: string[];
 	periodCount: number;
-	colorIndexOffset: number;
 	total: number;
 }
 
@@ -104,7 +93,6 @@ function Section({
 	categories,
 	periods,
 	periodCount,
-	colorIndexOffset,
 	total,
 }: SectionProps) {
 	if (categories.length === 0) {
@@ -134,7 +122,6 @@ function Section({
 					category={category}
 					periods={periods}
 					periodCount={periodCount}
-					colorIndex={colorIndexOffset + index}
 				/>
 			))}
 		</div>
@@ -173,7 +160,6 @@ export function CategoryReportCards({ data }: CategoryReportCardsProps) {
 				categories={despesas}
 				periods={periods}
 				periodCount={periodCount}
-				colorIndexOffset={0}
 				total={despesasTotal}
 			/>
 
@@ -183,7 +169,6 @@ export function CategoryReportCards({ data }: CategoryReportCardsProps) {
 				categories={receitas}
 				periods={periods}
 				periodCount={periodCount}
-				colorIndexOffset={despesas.length}
 				total={receitasTotal}
 			/>
 		</div>

src/features/reports/components/category-report-table.tsx

@@ -33,20 +33,10 @@ export function CategoryReportTable({ data }: CategoryReportTableProps) {
 	return (
 		<div className="flex flex-col gap-6">
 			{/* Despesas Table */}
-			<CategoryTable
-				title="Despesas"
-				categories={despesas}
-				periods={periods}
-				colorIndexOffset={0}
-			/>
+			<CategoryTable title="Despesas" categories={despesas} periods={periods} />
 
 			{/* Receitas Table */}
-			<CategoryTable
-				title="Receitas"
-				categories={receitas}
-				periods={periods}
-				colorIndexOffset={despesas.length}
-			/>
+			<CategoryTable title="Receitas" categories={receitas} periods={periods} />
 		</div>
 	);
 }

src/features/reports/components/category-table.tsx

@@ -2,8 +2,8 @@
 
 import Link from "next/link";
 import { useMemo } from "react";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import { formatPeriodLabel } from "@/features/reports/utils";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import StatusDot from "@/shared/components/status-dot";
 import { Card } from "@/shared/components/ui/card";
 import {
@@ -24,14 +24,12 @@ export interface CategoryTableProps {
 	title: string;
 	categories: CategoryReportItem[];
 	periods: string[];
-	colorIndexOffset: number;
 }
 
 export function CategoryTable({
 	title,
 	categories,
 	periods,
-	colorIndexOffset,
 }: CategoryTableProps) {
 	// Calculate section totals
 	const sectionTotals = useMemo(() => {
@@ -86,7 +84,6 @@ export function CategoryTable({
 
 				<TableBody>
 					{categories.map((category, index) => {
-						const colorIndex = colorIndexOffset + index;
 						const periodParam = formatPeriodForUrl(periods[periods.length - 1]);
 
 						return (
@@ -104,7 +101,6 @@ export function CategoryTable({
 										<CategoryIconBadge
 											icon={category.icon}
 											name={category.name}
-											colorIndex={colorIndex}
 										/>
 										<Link
 											href={`/categories/${category.categoryId}?periodo=${periodParam}`}

src/features/reports/components/establishments/top-categories.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { RiPriceTag3Line } from "@remixicon/react";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import type { TopEstabelecimentosData } from "@/features/reports/establishments/queries";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
 	Card,
@@ -64,7 +64,6 @@ export function TopCategories({ categories }: TopCategoriesProps) {
 										<CategoryIconBadge
 											icon={category.icon}
 											name={category.name}
-											colorIndex={index}
 										/>
 
 										{/* Name and percentage */}