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

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>
+	);
+}

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>
+	);
+}

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

src/shared/components/logo-picker/logo-picker.tsx

@@ -142,7 +142,7 @@ export function LogoPickerDialog({
 						Nenhum logo encontrado para “{search}”
 					</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 &&

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

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:

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);
 }

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