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