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: