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

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">