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

lib/lancamentos/form-helpers.ts

@@ -7,6 +7,11 @@ import {
 	LANCAMENTO_TRANSACTION_TYPES,
 } from "./constants";
 
+/**
+ * Split type for dividing transactions between payers
+ */
+export type SplitType = "equal" | "60-40" | "70-30" | "80-20" | "custom";
+
 /**
  * Form state type for lancamento dialog
  */
@@ -21,6 +26,9 @@ export type LancamentoFormState = {
 	pagadorId: string | undefined;
 	secondaryPagadorId: string | undefined;
 	isSplit: boolean;
+	splitType: SplitType;
+	primarySplitAmount: string;
+	secondarySplitAmount: string;
 	contaId: string | undefined;
 	cartaoId: string | undefined;
 	categoriaId: string | undefined;
@@ -115,6 +123,9 @@ export function buildLancamentoInitialState(
 		pagadorId: fallbackPagadorId ?? undefined,
 		secondaryPagadorId: undefined,
 		isSplit: false,
+		splitType: "equal",
+		primarySplitAmount: "",
+		secondarySplitAmount: "",
 		contaId:
 			paymentMethod === "Cartão de crédito"
 				? undefined
@@ -146,6 +157,39 @@ export function buildLancamentoInitialState(
 	};
 }
 
+/**
+ * Split presets with their percentages
+ */
+const SPLIT_PRESETS: Record<SplitType, { primary: number; secondary: number }> =
+	{
+		equal: { primary: 50, secondary: 50 },
+		"60-40": { primary: 60, secondary: 40 },
+		"70-30": { primary: 70, secondary: 30 },
+		"80-20": { primary: 80, secondary: 20 },
+		custom: { primary: 50, secondary: 50 },
+	};
+
+/**
+ * Calculates split amounts based on total and split type
+ */
+export function calculateSplitAmounts(
+	totalAmount: number,
+	splitType: SplitType,
+): { primary: string; secondary: string } {
+	if (totalAmount <= 0) {
+		return { primary: "", secondary: "" };
+	}
+
+	const preset = SPLIT_PRESETS[splitType];
+	const primaryAmount = (totalAmount * preset.primary) / 100;
+	const secondaryAmount = totalAmount - primaryAmount;
+
+	return {
+		primary: primaryAmount.toFixed(2),
+		secondary: secondaryAmount.toFixed(2),
+	};
+}
+
 /**
  * Applies field dependencies when form state changes
  * This function encapsulates the business logic for field interdependencies
@@ -202,9 +246,38 @@ export function applyFieldDependencies(
 		}
 	}
 
-	// When split is disabled, clear secondary pagador
+	// When split is disabled, clear secondary pagador and split fields
 	if (key === "isSplit" && value === false) {
 		updates.secondaryPagadorId = undefined;
+		updates.splitType = "equal";
+		updates.primarySplitAmount = "";
+		updates.secondarySplitAmount = "";
+	}
+
+	// When split is enabled and amount exists, calculate initial split amounts
+	if (key === "isSplit" && value === true) {
+		const totalAmount = Number.parseFloat(currentState.amount) || 0;
+		if (totalAmount > 0) {
+			const half = (totalAmount / 2).toFixed(2);
+			updates.primarySplitAmount = half;
+			updates.secondarySplitAmount = half;
+		}
+	}
+
+	// When amount changes and split is enabled, recalculate split amounts
+	if (key === "amount" && typeof value === "string" && currentState.isSplit) {
+		const totalAmount = Number.parseFloat(value) || 0;
+		if (totalAmount > 0) {
+			const splitAmounts = calculateSplitAmounts(
+				totalAmount,
+				currentState.splitType,
+			);
+			updates.primarySplitAmount = splitAmounts.primary;
+			updates.secondarySplitAmount = splitAmounts.secondary;
+		} else {
+			updates.primarySplitAmount = "";
+			updates.secondarySplitAmount = "";
+		}
 	}
 
 	// When primary pagador changes, clear secondary if it matches

lib/pagadores/constants.ts

@@ -4,4 +4,4 @@ export type PagadorStatus = (typeof PAGADOR_STATUS_OPTIONS)[number];
 
 export const PAGADOR_ROLE_ADMIN = "admin";
 export const PAGADOR_ROLE_TERCEIRO = "terceiro";
-export const DEFAULT_PAGADOR_AVATAR = "avatar_010.svg";
+export const DEFAULT_PAGADOR_AVATAR = "default_icon.png";

lib/pagadores/utils.ts

@@ -3,11 +3,22 @@ import { DEFAULT_PAGADOR_AVATAR } from "./constants";
 /**
  * Normaliza o caminho do avatar extraindo apenas o nome do arquivo.
  * Remove qualquer caminho anterior e retorna null se não houver avatar.
+ * Preserva URLs completas (http/https/data).
  */
 export const normalizeAvatarPath = (
 	avatar: string | null | undefined,
 ): string | null => {
 	if (!avatar) return null;
+
+	// Preservar URLs completas (Google, etc)
+	if (
+		avatar.startsWith("http://") ||
+		avatar.startsWith("https://") ||
+		avatar.startsWith("data:")
+	) {
+		return avatar;
+	}
+
 	const file = avatar.split("/").filter(Boolean).pop();
 	return file ?? avatar;
 };