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

2026-05-09 11:01:45 +00:00 · 2026-03-17 17:08:54 +00:00
parent 7064c0b0bc
commit 272e90aef9
32 changed files with 316 additions and 314 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -16,7 +16,7 @@
  --popover-foreground: var(--foreground);

  --primary: oklch(72.069% 0.18335 44.069);
-  --primary-foreground: oklch(98% 0.008 80);
+  --primary-foreground: oklch(16% 0.004 60);

  --secondary: oklch(96.2% 0.005 70);
  --secondary-foreground: oklch(30% 0.01 45);
@@ -51,6 +51,18 @@
  --chart-9: var(--color-cyan-500);
  --chart-10: var(--color-lime-500);

+  /* Data palette — análoga quente (hue 0–120), família do primary */
+  --data-1:  oklch(58% 0.22 18);  /* vermelho-tijolo */
+  --data-2:  oklch(64% 0.22 30);  /* vermelho-laranja */
+  --data-3:  oklch(69% 0.21 42);  /* laranja (≈ primary) */
+  --data-4:  oklch(74% 0.18 55);  /* âmbar */
+  --data-5:  oklch(78% 0.16 68);  /* âmbar-dourado */
+  --data-6:  oklch(76% 0.15 82);  /* amarelo-quente */
+  --data-7:  oklch(70% 0.17 95);  /* amarelo-lima */
+  --data-8:  oklch(65% 0.18 108); /* lima-verde */
+  --data-9:  oklch(62% 0.17 120); /* verde-oliva claro */
+  --data-10: oklch(56% 0.15 10);  /* terracota escuro */
+
  --sidebar: oklch(99.3% 0.0015 75);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
@@ -88,7 +100,7 @@
  --popover: oklch(28% 0.004 55);
  --popover-foreground: var(--foreground);

-  --primary: oklch(66% 0.15 45.139);
+  --primary:  oklch(72.069% 0.18335 44.069);
  --primary-foreground: oklch(16% 0.004 60);

  --secondary: oklch(29% 0.004 55);
@@ -124,6 +136,19 @@
  --chart-9: var(--color-cyan-500);
  --chart-10: var(--color-lime-500);

+  /* Data palette — dark mode (ligeiramente mais vivos) */
+  /* Data palette dark — ligeiramente mais vivos para contrastar no fundo escuro */
+  --data-1:  oklch(66% 0.22 18);
+  --data-2:  oklch(72% 0.22 30);
+  --data-3:  oklch(76% 0.21 42);
+  --data-4:  oklch(81% 0.18 55);
+  --data-5:  oklch(84% 0.16 68);
+  --data-6:  oklch(82% 0.15 82);
+  --data-7:  oklch(77% 0.17 95);
+  --data-8:  oklch(72% 0.18 108);
+  --data-9:  oklch(69% 0.17 120);
+  --data-10: oklch(63% 0.15 10);
+
  --sidebar: oklch(19.5% 0.004 55);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
--- a/src/features/budgets/components/budget-card.tsx
+++ b/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">
--- a/src/features/budgets/components/budgets-page.tsx
+++ b/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}
--- a/src/features/categories/components/categories-page.tsx
+++ b/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>
--- a/src/features/categories/components/category-detail-header.tsx
+++ b/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">
--- a/src/features/categories/components/category-icon-badge.tsx
+++ b/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";
--- a/src/features/dashboard/components/bills/bill-list-item.tsx
+++ b/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">
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx
+++ b/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">
--- a/src/features/dashboard/components/goals-progress/goal-progress-item.tsx
+++ b/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
 					}
 				/>
--- a/src/features/dashboard/components/income-expense-balance-widget.tsx
+++ b/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;

--- a/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx
+++ b/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">
--- a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
+++ b/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">
--- a/src/features/dashboard/components/purchases-by-category-widget.tsx
+++ b/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">
--- a/src/features/dashboard/components/recurring-expenses-widget.tsx
+++ b/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">
--- a/src/features/dashboard/components/top-establishments-widget.tsx
+++ b/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">
--- a/src/features/dashboard/components/top-expenses-widget.tsx
+++ b/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">
--- a/src/features/payers/components/details/payer-payment-method-cards.tsx
+++ b/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}
--- a/src/features/reports/components/cards/card-category-breakdown.tsx
+++ b/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 */}
--- a/src/features/reports/components/category-report-cards.tsx
+++ b/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>
--- a/src/features/reports/components/category-report-table.tsx
+++ b/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>
 	);
 }
--- a/src/features/reports/components/category-table.tsx
+++ b/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}`}
--- a/src/features/reports/components/establishments/top-categories.tsx
+++ b/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 */}
--- a/src/features/transactions/components/shared/establishment-logo.tsx
+++ b/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";
--- a/src/features/transactions/components/table/transactions-table.tsx
+++ b/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,
 												)}
 											>
--- a/src/shared/components/entity-avatar/category-icon-badge.tsx
+++ b/src/shared/components/entity-avatar/category-icon-badge.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import type { ComponentType } from "react";
+import {
+	buildInitials,
+	getCategoryBgColorFromName,
+	getCategoryColorFromName,
+} 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 — define cor e iniciais de fallback */
+	name: string;
+	/** Tamanho do badge: sm (32px), md (36px), lg (48px) */
+	size?: CategoryIconBadgeSize;
+	/** Classes adicionais para o container */
+	className?: string;
+}
+
+export function CategoryIconBadge({
+	icon,
+	name,
+	size = "md",
+	className,
+}: CategoryIconBadgeProps) {
+	const IconComponent = icon
+		? (getIconComponent(icon) as ComponentType<{
+				className?: string;
+				style?: React.CSSProperties;
+			}>)
+		: null;
+	const initials = buildInitials(name);
+	const color = getCategoryColorFromName(name);
+	const bgColor = getCategoryBgColorFromName(name);
+	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 ? (
+				<IconComponent className={variant.icon} style={{ color }} />
+			) : (
+				<span className={cn("uppercase", variant.text)} style={{ color }}>
+					{initials}
+				</span>
+			)}
+		</div>
+	);
+}
--- a/src/shared/components/entity-avatar/establishment-logo.tsx
+++ b/src/shared/components/entity-avatar/establishment-logo.tsx
@@ -0,0 +1,41 @@
+import {
+	buildInitials,
+	getCategoryBgColorFromName,
+	getCategoryColorFromName,
+} from "@/shared/utils/category-colors";
+import { cn } from "@/shared/utils/ui";
+
+interface EstablishmentLogoProps {
+	name: string;
+	size?: number;
+	className?: string;
+}
+
+export function EstablishmentLogo({
+	name,
+	size = 32,
+	className,
+}: EstablishmentLogoProps) {
+	const initials = buildInitials(name);
+	const color = getCategoryColorFromName(name);
+	const bgColor = getCategoryBgColorFromName(name);
+
+	return (
+		<div
+			className={cn(
+				"flex shrink-0 items-center justify-center rounded-full font-bold",
+				className,
+			)}
+			style={{
+				width: size,
+				height: size,
+				fontSize: Math.max(10, Math.round(size * 0.38)),
+				backgroundColor: bgColor,
+				color,
+			}}
+			aria-hidden
+		>
+			{initials}
+		</div>
+	);
+}
--- a/src/shared/components/entity-avatar/index.ts
+++ b/src/shared/components/entity-avatar/index.ts
@@ -0,0 +1,6 @@
+export type {
+	CategoryIconBadgeProps,
+	CategoryIconBadgeSize,
+} from "./category-icon-badge";
+export { CategoryIconBadge } from "./category-icon-badge";
+export { EstablishmentLogo } from "./establishment-logo";
--- a/src/shared/components/logo-picker/logo-picker.tsx
+++ b/src/shared/components/logo-picker/logo-picker.tsx
@@ -142,7 +142,7 @@ export function LogoPickerDialog({
 						Nenhum logo encontrado para &ldquo;{search}&rdquo;
 					</p>
 				) : (
-					<div className="grid max-h-custom-height-card grid-cols-4 gap-2 overflow-y-auto p-1 sm:grid-cols-4 md:grid-cols-5">
+					<div className="grid max-h-custom-height-card grid-cols-4 gap-2 overflow-y-auto p-1 md:grid-cols-5">
 						{filteredLogos.map((logo) => {
 							const isActive = value === logo;
 							const logoLabel = deriveNameFromLogo(logo);
@@ -151,13 +151,10 @@ export function LogoPickerDialog({
 								<button
 									type="button"
 									key={logo}
-									onClick={(e) => {
-										e.stopPropagation();
-										e.preventDefault();
-										onSelect(logo);
-									}}
+									onClick={() => onSelect(logo)}
 									onPointerDown={(e) => e.stopPropagation()}
-									onTouchStart={(e) => e.stopPropagation()}
+									aria-label={`Selecionar logo ${logoLabel || logo}`}
+									aria-pressed={isActive}
 									className={cn(
 										"flex flex-col items-center gap-1 rounded-md bg-card p-2 text-center text-xs transition-all hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 										isActive &&
--- a/src/shared/components/logo.tsx
+++ b/src/shared/components/logo.tsx
@@ -7,6 +7,8 @@ interface LogoProps {
 	className?: string;
 	showVersion?: boolean;
 	invertTextOnDark?: boolean;
+	/** Exibe o ícone na cor original, sem filtro preto */
+	colorIcon?: boolean;
 }

 export function Logo({
@@ -14,6 +16,7 @@ export function Logo({
 	className,
 	showVersion = false,
 	invertTextOnDark = true,
+	colorIcon = false,
 }: LogoProps) {
 	if (variant === "compact") {
 		return (
@@ -23,7 +26,7 @@ export function Logo({
 					alt="OpenMonetis"
 					width={32}
 					height={32}
-					className="object-contain brightness-0 saturate-0"
+					className={cn("object-contain", !colorIcon && "brightness-0 saturate-0")}
 					priority
 				/>
 				<Image
--- a/src/shared/components/ui/button.tsx
+++ b/src/shared/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: "bg-primary hover:bg-primary/90",
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				destructive:
 					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
 				outline:
--- a/src/shared/utils/category-colors.ts
+++ b/src/shared/utils/category-colors.ts
@@ -1,46 +1,68 @@
 /**
- * Cores para categorias em widgets e listas
- * Usadas para colorir ícones e backgrounds de categorias
+ * Data palette para categorias e estabelecimentos.
+ * Os valores são CSS variables definidas em globals.css,
+ * com variantes light/dark — sem hardcode de hex fora do tema.
 */
-export const CATEGORY_COLORS = [
-	"#ef4444", // red
-	"#3b82f6", // blue
-	"#10b981", // emerald
-	"#f59e0b", // amber
-	"#8b5cf6", // violet
-	"#ec4899", // pink
-	"#14b8a6", // teal
-	"#f97316", // orange
-	"#6366f1", // indigo
-	"#84cc16", // lime
-] as const;
+const DATA_PALETTE_SIZE = 10;

-/**
- * Retorna a cor para um índice específico (com ciclo)
- */
-export function getCategoryColor(index: number): string {
-	return CATEGORY_COLORS[index % CATEGORY_COLORS.length];
-}
+/** Array de CSS variables da paleta de dados — usado em gráficos e charts. */
+export const CATEGORY_COLORS = Array.from(
+	{ length: DATA_PALETTE_SIZE },
+	(_, i) => `var(--data-${i + 1})`,
+) as readonly string[];

-/**
- * Retorna a cor de background com transparência
- */
-export function getCategoryBgColor(index: number): string {
-	const color = getCategoryColor(index);
-	return `${color}15`;
-}
-
-/**
- * Gera iniciais a partir de um nome
- */
-export function buildCategoryInitials(value: string): string {
-	const parts = value.trim().split(/\s+/).filter(Boolean);
-	if (parts.length === 0) return "CT";
-	if (parts.length === 1) {
-		const firstPart = parts[0];
-		return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CT";
+function hashNameToIndex(name: string): number {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) {
+		hash = name.charCodeAt(i) + ((hash << 5) - hash);
 	}
-	const firstChar = parts[0]?.[0] ?? "";
-	const secondChar = parts[1]?.[0] ?? "";
-	return `${firstChar}${secondChar}`.toUpperCase() || "CT";
+	return Math.abs(hash) % DATA_PALETTE_SIZE;
+}
+
+/**
+ * Retorna a CSS variable de cor para um nome (determinístico via hash).
+ */
+export function getCategoryColorFromName(name: string): string {
+	const n = hashNameToIndex(name) + 1;
+	return `var(--data-${n})`;
+}
+
+/**
+ * Retorna o background com transparência usando color-mix.
+ */
+export function getCategoryBgColorFromName(name: string): string {
+	const n = hashNameToIndex(name) + 1;
+	return `color-mix(in oklch, var(--data-${n}) 14%, transparent)`;
+}
+
+/**
+ * Gera 1 ou 2 iniciais a partir de um nome.
+ * "Padaria João" → "PJ" | "Alimentação" → "AL" | "" → "?"
+ */
+export function buildInitials(name: string): string {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "?";
+	if (parts.length === 1) {
+		return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
+	}
+	const a = parts[0]?.[0] ?? "";
+	const b = parts[1]?.[0] ?? "";
+	return `${a}${b}`.toUpperCase() || "?";
+}
+
+// --- compatibilidade retroativa (para não quebrar callers durante migração) ---
+
+/** @deprecated Use getCategoryColorFromName */
+export function getCategoryColor(index: number): string {
+	return `var(--data-${(index % DATA_PALETTE_SIZE) + 1})`;
+}
+
+/** @deprecated Use getCategoryBgColorFromName */
+export function getCategoryBgColor(index: number): string {
+	return `color-mix(in oklch, var(--data-${(index % DATA_PALETTE_SIZE) + 1}) 14%, transparent)`;
+}
+
+/** @deprecated Use buildInitials */
+export function buildCategoryInitials(value: string): string {
+	return buildInitials(value);
 }
--- a/src/shared/utils/date.ts
+++ b/src/shared/utils/date.ts
@@ -296,6 +296,23 @@ export function addMonthsToDate(value: Date, offset: number): Date {
 // DATE FORMATTING
 // ============================================================================

+/**
+ * Formats a UTC date/datetime to short display format (weekday + day + month), capitalized.
+ * Use this for timestamps stored as UTC (e.g. transaction dates from the DB).
+ * @example
+ * formatTransactionDate("2024-11-14T00:00:00Z") // "Qui 14 nov"
+ */
+export function formatTransactionDate(date: Date | string): string {
+	const d = date instanceof Date ? date : new Date(date);
+	const formatted = new Intl.DateTimeFormat("pt-BR", {
+		weekday: "short",
+		day: "2-digit",
+		month: "short",
+		timeZone: "UTC",
+	}).format(d);
+	return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
 /**
 * Formats a date value to short display format
 * @example