feat(pagadores): adicionar widget no dashboard e atualizar avatares

- Novo widget de pagadores no dashboard com resumo de transações
- Substituir avatares SVG por PNG com melhor qualidade
- Melhorar seção de pagador no diálogo de lançamentos
- Adicionar ação para buscar pagadores por nome
- Atualizar componentes de seleção (cartões, categorias, contas)
- Melhorias no layout de ajustes e relatórios

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/dashboard/fetch-dashboard-data.ts

@@ -9,6 +9,7 @@ import { fetchIncomeExpenseBalance } from "./income-expense-balance";
 import { fetchDashboardInvoices } from "./invoices";
 import { fetchDashboardCardMetrics } from "./metrics";
 import { fetchDashboardNotifications } from "./notifications";
+import { fetchDashboardPagadores } from "./pagadores";
 import { fetchPaymentConditions } from "./payments/payment-conditions";
 import { fetchPaymentMethods } from "./payments/payment-methods";
 import { fetchPaymentStatus } from "./payments/payment-status";
@@ -25,6 +26,7 @@ export async function fetchDashboardData(userId: string, period: string) {
 		notificationsSnapshot,
 		paymentStatusData,
 		incomeExpenseBalanceData,
+		pagadoresSnapshot,
 		recentTransactionsData,
 		paymentConditionsData,
 		paymentMethodsData,
@@ -44,6 +46,7 @@ export async function fetchDashboardData(userId: string, period: string) {
 		fetchDashboardNotifications(userId, period),
 		fetchPaymentStatus(userId, period),
 		fetchIncomeExpenseBalance(userId, period),
+		fetchDashboardPagadores(userId, period),
 		fetchRecentTransactions(userId, period),
 		fetchPaymentConditions(userId, period),
 		fetchPaymentMethods(userId, period),
@@ -65,6 +68,7 @@ export async function fetchDashboardData(userId: string, period: string) {
 		notificationsSnapshot,
 		paymentStatusData,
 		incomeExpenseBalanceData,
+		pagadoresSnapshot,
 		recentTransactionsData,
 		paymentConditionsData,
 		paymentMethodsData,

lib/dashboard/pagadores.ts

@@ -0,0 +1,77 @@
+import { and, desc, eq, isNull, or, sql } from "drizzle-orm";
+import { lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { toNumber } from "@/lib/dashboard/common";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+
+export type DashboardPagador = {
+	id: string;
+	name: string;
+	email: string | null;
+	avatarUrl: string | null;
+	totalExpenses: number;
+	isAdmin: boolean;
+};
+
+export type DashboardPagadoresSnapshot = {
+	pagadores: DashboardPagador[];
+	totalExpenses: number;
+};
+
+export async function fetchDashboardPagadores(
+	userId: string,
+	period: string,
+): Promise<DashboardPagadoresSnapshot> {
+	const rows = await db
+		.select({
+			id: pagadores.id,
+			name: pagadores.name,
+			email: pagadores.email,
+			avatarUrl: pagadores.avatarUrl,
+			role: pagadores.role,
+			totalExpenses: sql<number>`COALESCE(SUM(ABS(${lancamentos.amount})), 0)`,
+		})
+		.from(lancamentos)
+		.innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+		.where(
+			and(
+				eq(lancamentos.userId, userId),
+				eq(lancamentos.period, period),
+				eq(lancamentos.transactionType, "Despesa"),
+				or(
+					isNull(lancamentos.note),
+					sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
+				),
+			),
+		)
+		.groupBy(
+			pagadores.id,
+			pagadores.name,
+			pagadores.email,
+			pagadores.avatarUrl,
+			pagadores.role,
+		)
+		.orderBy(desc(sql`SUM(ABS(${lancamentos.amount}))`));
+
+	const pagadoresList = rows
+		.map((row) => ({
+			id: row.id,
+			name: row.name,
+			email: row.email,
+			avatarUrl: row.avatarUrl,
+			totalExpenses: toNumber(row.totalExpenses),
+			isAdmin: row.role === PAGADOR_ROLE_ADMIN,
+		}))
+		.filter((p) => p.totalExpenses > 0);
+
+	const totalExpenses = pagadoresList.reduce(
+		(sum, p) => sum + p.totalExpenses,
+		0,
+	);
+
+	return {
+		pagadores: pagadoresList,
+		totalExpenses,
+	};
+}

lib/dashboard/widgets/widgets-config.tsx

@@ -5,6 +5,7 @@ import {
 	RiBarcodeLine,
 	RiBillLine,
 	RiExchangeLine,
+	RiGroupLine,
 	RiLineChartLine,
 	RiMoneyDollarCircleLine,
 	RiNumbersLine,
@@ -24,6 +25,7 @@ import { IncomeExpenseBalanceWidget } from "@/components/dashboard/income-expens
 import { InstallmentExpensesWidget } from "@/components/dashboard/installment-expenses-widget";
 import { InvoicesWidget } from "@/components/dashboard/invoices-widget";
 import { MyAccountsWidget } from "@/components/dashboard/my-accounts-widget";
+import { PagadoresWidget } from "@/components/dashboard/pagadores-widget";
 import { PaymentConditionsWidget } from "@/components/dashboard/payment-conditions-widget";
 import { PaymentMethodsWidget } from "@/components/dashboard/payment-methods-widget";
 import { PaymentStatusWidget } from "@/components/dashboard/payment-status-widget";
@@ -93,6 +95,24 @@ export const widgetsConfig: WidgetConfig[] = [
 			<IncomeExpenseBalanceWidget data={data.incomeExpenseBalanceData} />
 		),
 	},
+	{
+		id: "pagadores",
+		title: "Pagadores",
+		subtitle: "Despesas por pagador no período",
+		icon: <RiGroupLine className="size-4" />,
+		component: ({ data }) => (
+			<PagadoresWidget pagadores={data.pagadoresSnapshot.pagadores} />
+		),
+		action: (
+			<Link
+				href="/pagadores"
+				className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors inline-flex items-center gap-1"
+			>
+				Ver todos
+				<RiArrowRightLine className="size-4" />
+			</Link>
+		),
+	},
 	{
 		id: "recent-transactions",
 		title: "Lançamentos Recentes",