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

src/features/budgets/components/budget-card.tsx

@@ -6,7 +6,7 @@ import {
 	RiPencilLine,
 } from "@remixicon/react";
 import Link from "next/link";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Card, CardContent, CardFooter } from "@/shared/components/ui/card";
 import { Progress } from "@/shared/components/ui/progress";
@@ -15,7 +15,6 @@ import type { Budget } from "./types";
 
 interface BudgetCardProps {
 	budget: Budget;
-	colorIndex: number;
 	periodLabel: string;
 	onEdit: (budget: Budget) => void;
 	onRemove: (budget: Budget) => void;
@@ -34,7 +33,6 @@ const formatCategoryName = (budget: Budget) =>
 
 export function BudgetCard({
 	budget,
-	colorIndex,
 	periodLabel,
 	onEdit,
 	onRemove,
@@ -51,7 +49,6 @@ export function BudgetCard({
 					<CategoryIconBadge
 						icon={budget.category?.icon ?? undefined}
 						name={formatCategoryName(budget)}
-						colorIndex={colorIndex}
 						size="lg"
 					/>
 					<div className="space-y-1">

src/features/budgets/components/budgets-page.tsx

@@ -137,7 +137,6 @@ export function BudgetsPage({
 							<BudgetCard
 								key={budget.id}
 								budget={budget}
-								colorIndex={index}
 								periodLabel={periodLabel}
 								onEdit={handleEdit}
 								onRemove={handleRemoveRequest}

src/features/categories/components/categories-page.tsx

@@ -177,7 +177,6 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 																<CategoryIconBadge
 																	icon={category.icon}
 																	name={category.name}
-																	colorIndex={index}
 																	size="md"
 																/>
 															</TableCell>

src/features/categories/components/category-detail-header.tsx

@@ -77,7 +77,6 @@ export function CategoryDetailHeader({
 					<CategoryIconBadge
 						icon={category.icon}
 						name={category.name}
-						colorIndex={0}
 						size="lg"
 					/>
 					<div className="space-y-2">

src/features/categories/components/category-icon-badge.tsx

@@ -1,76 +1,6 @@
-"use client";
-
-import {
-	buildCategoryInitials,
-	getCategoryBgColor,
-	getCategoryColor,
-} from "@/shared/utils/category-colors";
-import { getIconComponent } from "@/shared/utils/icons";
-import { cn } from "@/shared/utils/ui";
-
-const sizeVariants = {
-	sm: {
-		container: "size-8",
-		icon: "size-4",
-		text: "text-[10px]",
-	},
-	md: {
-		container: "size-9",
-		icon: "size-5",
-		text: "text-xs",
-	},
-	lg: {
-		container: "size-12",
-		icon: "size-6",
-		text: "text-sm",
-	},
-} as const;
-
-export type CategoryIconBadgeSize = keyof typeof sizeVariants;
-
-export interface CategoryIconBadgeProps {
-	/** Nome do ícone Remix (ex: "RiShoppingBag3Line") */
-	icon?: string | null;
-	/** Nome da categoria (usado para gerar iniciais como fallback) */
-	name: string;
-	/** Índice para determinar a cor (cicla entre as cores disponíveis) */
-	colorIndex: number;
-	/** Tamanho do badge: sm (32px), md (36px), lg (48px) */
-	size?: CategoryIconBadgeSize;
-	/** Classes adicionais para o container */
-	className?: string;
-}
-
-export function CategoryIconBadge({
-	icon,
-	name,
-	colorIndex,
-	size = "md",
-	className,
-}: CategoryIconBadgeProps) {
-	const IconComponent = icon ? getIconComponent(icon) : null;
-	const initials = buildCategoryInitials(name);
-	const color = getCategoryColor(colorIndex);
-	const bgColor = getCategoryBgColor(colorIndex);
-	const variant = sizeVariants[size];
-
-	return (
-		<div
-			className={cn(
-				"flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-				variant.container,
-				className,
-			)}
-			style={{ backgroundColor: bgColor }}
-		>
-			{IconComponent ? (
-				// @ts-expect-error icon accepts style but type is too narrow
-				<IconComponent className={variant.icon} style={{ color }} />
-			) : (
-				<span className={cn("uppercase", variant.text)} style={{ color }}>
-					{initials}
-				</span>
-			)}
-		</div>
-	);
-}
+// Re-export from shared — componente movido para src/shared/components/entity-avatar/
+export {
+	CategoryIconBadge,
+	type CategoryIconBadgeProps,
+	type CategoryIconBadgeSize,
+} from "@/shared/components/entity-avatar";

src/features/dashboard/components/bills/bill-list-item.tsx

@@ -4,7 +4,7 @@ import {
 	isBillOverdue,
 } from "@/features/dashboard/bills-helpers";
 import type { DashboardBill } from "@/features/dashboard/bills-queries";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
 import { cn } from "@/shared/utils/ui";
@@ -21,7 +21,7 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
 	return (
 		<li className="flex items-center justify-between transition-all duration-300 py-1.5">
 			<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
-				<EstabelecimentoLogo name={bill.name} size={37} />
+				<EstablishmentLogo name={bill.name} size={37} />
 
 				<div className="min-w-0">
 					<span className="block truncate text-sm font-medium text-foreground">

src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx

@@ -12,8 +12,8 @@ import {
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import { Pie, PieChart, Tooltip } from "recharts";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import type { DashboardCategoryBreakdownData } from "@/features/dashboard/categories/category-breakdown";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { type ChartConfig, ChartContainer } from "@/shared/components/ui/chart";
 import {
@@ -220,7 +220,6 @@ export function CategoryBreakdownWidgetView({
 										<CategoryIconBadge
 											icon={category.categoryIcon}
 											name={category.categoryName}
-											colorIndex={index}
 										/>
 
 										<div className="min-w-0 flex-1">

src/features/dashboard/components/goals-progress/goal-progress-item.tsx

@@ -1,11 +1,10 @@
 import { RiPencilLine } from "@remixicon/react";
-import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
 import {
 	clampGoalProgress,
 	formatGoalProgressPercentage,
-	getGoalProgressStatusColorClass,
 } from "@/features/dashboard/goals-progress-helpers";
 import type { GoalProgressItem as GoalProgressItemData } from "@/features/dashboard/goals-progress-queries";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
 import { Progress } from "@/shared/components/ui/progress";
@@ -21,10 +20,14 @@ export function GoalProgressItem({
 	index,
 	onEdit,
 }: GoalProgressItemProps) {
-	const statusColor = getGoalProgressStatusColorClass(item.status);
 	const progressValue = clampGoalProgress(item.usedPercentage, 0, 100);
 	const percentageDelta = item.usedPercentage - 100;
-
+	const deltaColor =
+		percentageDelta > 0
+			? "text-destructive"
+			: percentageDelta < 0
+				? "text-success"
+				: "text-muted-foreground";
 	const isExceeded = item.status === "exceeded";
 
 	return (
@@ -34,7 +37,6 @@ export function GoalProgressItem({
 					<CategoryIconBadge
 						icon={item.categoryIcon}
 						name={item.categoryName}
-						colorIndex={index}
 						size="md"
 					/>
 					<div className="min-w-0 flex-1">
@@ -44,19 +46,19 @@ export function GoalProgressItem({
 						<p className="mt-0.5 text-xs text-muted-foreground">
 							<MoneyValues amount={item.spentAmount} /> de{" "}
 							<MoneyValues amount={item.budgetAmount} />
+							<span className={`ml-1.5 font-medium ${deltaColor}`}>
+								{formatGoalProgressPercentage(percentageDelta, true)}
+							</span>
 						</p>
 					</div>
 				</div>
 
 				<div className="flex shrink-0 items-center gap-2">
-					<span className={`text-xs font-medium ${statusColor}`}>
-						{formatGoalProgressPercentage(percentageDelta, true)}
-					</span>
 					<Button
 						type="button"
-						variant="outline"
+						variant="link"
 						size="icon-sm"
-						className="opacity-30 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
+						className="transition-opacity text-primary hover:opacity-80"
 						onClick={() => onEdit(item)}
 						aria-label={`Editar orçamento de ${item.categoryName}`}
 					>
@@ -69,7 +71,7 @@ export function GoalProgressItem({
 					value={progressValue}
 					className={
 						isExceeded
-							? "[&_[data-slot=progress-indicator]]:bg-destructive bg-destructive/20"
+							? "**:data-[slot=progress-indicator]:bg-destructive bg-destructive/20"
 							: undefined
 					}
 				/>

src/features/dashboard/components/income-expense-balance-widget.tsx

@@ -19,15 +19,15 @@ type IncomeExpenseBalanceWidgetProps = {
 const chartConfig = {
 	receita: {
 		label: "Receita",
-		color: "var(--chart-1)",
+		color: "var(--data-9)",
 	},
 	despesa: {
 		label: "Despesa",
-		color: "var(--chart-2)",
+		color: "var(--data-1)",
 	},
 	balanco: {
 		label: "Balanço",
-		color: "var(--chart-3)",
+		color: "var(--data-4)",
 	},
 } satisfies ChartConfig;
 

src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import type { InstallmentExpense } from "@/features/dashboard/expenses/installment-expenses-queries";
 import { buildInstallmentExpenseDisplay } from "@/features/dashboard/installment-expenses-helpers";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
 import {
@@ -8,7 +9,6 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
-import { getPaymentMethodIcon } from "@/shared/utils/icons";
 
 type InstallmentExpenseListItemProps = {
 	expense: InstallmentExpense;
@@ -28,9 +28,7 @@ export function InstallmentExpenseListItem({
 
 	return (
 		<div className="flex items-center gap-3 transition-all duration-300 py-2">
-			<div className="flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground">
-				{getPaymentMethodIcon(expense.paymentMethod)}
-			</div>
+			<EstablishmentLogo name={expense.name} size={37} />
 
 			<div className="min-w-0 flex-1">
 				<div className="flex items-center justify-between gap-3">

src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx

@@ -5,9 +5,10 @@ import {
 } from "@/features/dashboard/payment-breakdown-formatters";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
-
-const ICON_WRAPPER_CLASS =
-	"flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground";
+import {
+	getCategoryBgColorFromName,
+	getCategoryColorFromName,
+} from "@/shared/utils/category-colors";
 
 export type PaymentBreakdownListItemData = {
 	id: string;
@@ -27,7 +28,15 @@ export function PaymentBreakdownListItem({
 }: PaymentBreakdownListItemProps) {
 	return (
 		<div className="flex items-center gap-3 transition-all duration-300 py-1.5">
-			<div className={ICON_WRAPPER_CLASS}>{item.icon}</div>
+			<div
+				className="flex size-9.5 shrink-0 items-center justify-center rounded-full"
+				style={{
+					backgroundColor: getCategoryBgColorFromName(item.id),
+					color: getCategoryColorFromName(item.id),
+				}}
+			>
+				{item.icon}
+			</div>
 
 			<div className="min-w-0 flex-1">
 				<div className="flex items-center justify-between">

src/features/dashboard/components/purchases-by-category-widget.tsx

@@ -3,7 +3,7 @@
 import { RiArrowDownSFill, RiStore3Line } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { PurchasesByCategoryData } from "@/features/dashboard/purchases-by-category-queries";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
 	Select,
@@ -14,25 +14,12 @@ import {
 } from "@/shared/components/ui/select";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
 import { CATEGORY_TYPE_LABEL } from "@/shared/lib/categories/constants";
+import { formatTransactionDate } from "@/shared/utils/date";
 
 type PurchasesByCategoryWidgetProps = {
 	data: PurchasesByCategoryData;
 };
 
-const formatTransactionDate = (date: Date | string) => {
-	const d = date instanceof Date ? date : new Date(date);
-	const formatter = new Intl.DateTimeFormat("pt-BR", {
-		weekday: "short",
-		day: "2-digit",
-		month: "short",
-		timeZone: "UTC",
-	});
-
-	const formatted = formatter.format(d);
-	// Capitaliza a primeira letra do dia da semana
-	return formatted.charAt(0).toUpperCase() + formatted.slice(1);
-};
-
 const STORAGE_KEY = "purchases-by-category-selected";
 
 export function PurchasesByCategoryWidget({
@@ -178,7 +165,7 @@ export function PurchasesByCategoryWidget({
 								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
 							>
 								<div className="flex min-w-0 flex-1 items-center gap-3">
-									<EstabelecimentoLogo name={transaction.name} size={37} />
+									<EstablishmentLogo name={transaction.name} size={37} />
 
 									<div className="min-w-0">
 										<p className="truncate text-sm font-medium text-foreground">

src/features/dashboard/components/recurring-expenses-widget.tsx

@@ -1,6 +1,6 @@
 import { RiRefreshLine } from "@remixicon/react";
 import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurring-expenses-queries";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
 
@@ -37,7 +37,7 @@ export function RecurringExpensesWidget({
 						key={expense.id}
 						className="flex items-center gap-2 transition-all duration-300 py-1.5"
 					>
-						<EstabelecimentoLogo name={expense.name} size={37} />
+						<EstablishmentLogo name={expense.name} size={37} />
 
 						<div className="min-w-0 flex-1">
 							<div className="flex items-center justify-between">

src/features/dashboard/components/top-establishments-widget.tsx

@@ -1,6 +1,6 @@
 import { RiStore2Line } from "@remixicon/react";
 import type { TopEstablishmentsData } from "@/features/dashboard/top-establishments-queries";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
 
@@ -35,7 +35,7 @@ export function TopEstablishmentsWidget({
 								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
 							>
 								<div className="flex min-w-0 flex-1 items-center gap-3">
-									<EstabelecimentoLogo name={establishment.name} size={37} />
+									<EstablishmentLogo name={establishment.name} size={37} />
 
 									<div className="min-w-0">
 										<p className="truncate text-sm font-medium text-foreground">

src/features/dashboard/components/top-expenses-widget.tsx

@@ -6,30 +6,17 @@ import type {
 	TopExpense,
 	TopExpensesData,
 } from "@/features/dashboard/expenses/top-expenses-queries";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Switch } from "@/shared/components/ui/switch";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
+import { formatTransactionDate } from "@/shared/utils/date";
 
 type TopExpensesWidgetProps = {
 	allExpenses: TopExpensesData;
 	cardOnlyExpenses: TopExpensesData;
 };
 
-const formatTransactionDate = (date: Date | string) => {
-	const d = date instanceof Date ? date : new Date(date);
-	const formatter = new Intl.DateTimeFormat("pt-BR", {
-		weekday: "short",
-		day: "2-digit",
-		month: "short",
-		timeZone: "UTC",
-	});
-
-	const formatted = formatter.format(d);
-	// Capitaliza a primeira letra do dia da semana
-	return formatted.charAt(0).toUpperCase() + formatted.slice(1);
-};
-
 const shouldIncludeExpense = (expense: TopExpense) => {
 	const normalizedName = expense.name.trim().toLowerCase();
 
@@ -113,7 +100,7 @@ export function TopExpensesWidget({
 								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
 							>
 								<div className="flex min-w-0 flex-1 items-center gap-3">
-									<EstabelecimentoLogo name={expense.name} size={37} />
+									<EstablishmentLogo name={expense.name} size={37} />
 
 									<div className="min-w-0">
 										<p className="truncate text-sm font-medium text-foreground">

src/features/payers/components/details/payer-payment-method-cards.tsx

@@ -5,7 +5,7 @@ import {
 	RiWallet3Line,
 } from "@remixicon/react";
 import { buildBillStatusLabel } from "@/features/dashboard/bills-helpers";
-import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { CardContent } from "@/shared/components/ui/card";
 import { Progress } from "@/shared/components/ui/progress";
@@ -44,7 +44,7 @@ export function PayerBoletoCard({ items }: PagadorBoletoCardProps) {
 					return (
 						<div key={item.id} className="flex items-center justify-between">
 							<div className="flex min-w-0 flex-1 items-center gap-3 py-2">
-								<EstabelecimentoLogo name={item.name} size={36} />
+								<EstablishmentLogo name={item.name} size={36} />
 								<div className="min-w-0">
 									<span className="block truncate text-sm font-medium text-foreground">
 										{item.name}

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 */}

src/features/transactions/components/shared/establishment-logo.tsx

@@ -1,70 +1,2 @@
-import { cn } from "@/shared/utils/ui";
-
-interface EstabelecimentoLogoProps {
-	name: string;
-	size?: number;
-	className?: string;
-}
-
-const COLOR_PALETTE = [
-	"bg-purple-400 dark:bg-purple-600",
-	"bg-pink-400 dark:bg-pink-600",
-	"bg-red-400 dark:bg-red-600",
-	"bg-orange-400 dark:bg-orange-600",
-	"bg-indigo-400 dark:bg-indigo-600",
-	"bg-violet-400 dark:bg-violet-600",
-	"bg-fuchsia-400 dark:bg-fuchsia-600",
-	"bg-rose-400 dark:bg-rose-600",
-	"bg-amber-400 dark:bg-amber-600",
-	"bg-emerald-400 dark:bg-emerald-600",
-];
-
-function getInitials(name: string): string {
-	if (!name || !name.trim()) return "?";
-
-	const words = name.trim().split(/\s+/);
-
-	if (words.length === 1) {
-		return words[0]?.[0]?.toUpperCase() || "?";
-	}
-
-	const firstInitial = words[0]?.[0]?.toUpperCase() || "";
-	const secondInitial = words[1]?.[0]?.toUpperCase() || "";
-
-	return `${firstInitial}${secondInitial}`;
-}
-
-function generateColorFromName(name: string): string {
-	let hash = 0;
-	for (let i = 0; i < name.length; i++) {
-		hash = name.charCodeAt(i) + ((hash << 5) - hash);
-	}
-	const index = Math.abs(hash) % COLOR_PALETTE.length;
-	return COLOR_PALETTE[index] || "bg-gray-400";
-}
-
-export function EstabelecimentoLogo({
-	name,
-	size = 32,
-	className,
-}: EstabelecimentoLogoProps) {
-	const initials = getInitials(name);
-	const colorClass = generateColorFromName(name);
-
-	return (
-		<div
-			className={cn(
-				"flex items-center justify-center rounded-full text-white font-bold shrink-0",
-				colorClass,
-				className,
-			)}
-			style={{
-				width: size,
-				height: size,
-				fontSize: (size ?? 32) * 0.4,
-			}}
-		>
-			{initials}
-		</div>
-	);
-}
+// Re-export from shared — componente movido para src/shared/components/entity-avatar/
+export { EstablishmentLogo as EstabelecimentoLogo } from "@/shared/components/entity-avatar";

src/features/transactions/components/table/transactions-table.tsx

@@ -1,6 +1,5 @@
 "use client";
 import {
-	RiAddCircleFill,
 	RiAddFill,
 	RiArrowLeftDoubleLine,
 	RiArrowLeftRightLine,
@@ -15,6 +14,7 @@ import {
 	RiDeleteBin5Line,
 	RiFileCopyLine,
 	RiFileList2Line,
+	RiFlashlightFill,
 	RiGroupLine,
 	RiHistoryLine,
 	RiMoreFill,
@@ -35,9 +35,12 @@ import {
 import Image from "next/image";
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { CategoryIcon } from "@/features/categories/components/category-icon";
 import { DEFAULT_LANCAMENTOS_COLUMN_ORDER } from "@/features/transactions/column-order";
 import { EmptyState } from "@/shared/components/empty-state";
+import {
+	CategoryIconBadge,
+	EstablishmentLogo,
+} from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { TransactionTypeBadge } from "@/shared/components/transaction-type-badge";
 import {
@@ -83,7 +86,6 @@ import { getAvatarSrc } from "@/shared/lib/payers/utils";
 import { formatDate } from "@/shared/utils/date";
 import { getConditionIcon, getPaymentMethodIcon } from "@/shared/utils/icons";
 import { cn } from "@/shared/utils/ui";
-import { EstabelecimentoLogo } from "../shared/establishment-logo";
 import { TransactionsExport } from "../transactions-export";
 import type {
 	AccountCardFilterOption,
@@ -192,7 +194,7 @@ const buildColumns = ({
 
 				return (
 					<span className="flex items-center gap-2">
-						<EstabelecimentoLogo name={name} size={28} />
+						<EstablishmentLogo name={name} size={28} />
 						<span className="flex flex-col">
 							<span className="text-[11px] text-muted-foreground">
 								{formatDate(purchaseDate)}
@@ -375,7 +377,11 @@ const buildColumns = ({
 
 				return (
 					<span className="flex items-center gap-2">
-						<CategoryIcon name={categoriaIcon} className="size-4" />
+						<CategoryIconBadge
+							icon={categoriaIcon}
+							name={categoriaName}
+							size="sm"
+						/>
 						<span>{categoriaName}</span>
 					</span>
 				);
@@ -909,7 +915,7 @@ export function TransactionsTable({
 											size="icon"
 											className="hidden size-9 sm:inline-flex"
 										>
-											<RiAddCircleFill className="size-4" />
+											<RiFlashlightFill className="size-4" />
 											<span className="sr-only">
 												Adicionar múltiplos lançamentos
 											</span>
@@ -1043,7 +1049,7 @@ export function TransactionsTable({
 														row.original.dueDate &&
 														!row.original.isSettled &&
 														new Date(row.original.dueDate) < new Date()
-														? "bg-destructive/[0.03] hover:bg-destructive/[0.05]"
+														? "bg-destructive/3 hover:bg-destructive/5"
 														: undefined,
 												)}
 											>