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

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