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>

components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog-types.ts

@@ -73,6 +73,7 @@ export interface SplitAndSettlementSectionProps extends BaseFieldSectionProps {
 export interface PagadorSectionProps extends BaseFieldSectionProps {
 	pagadorOptions: SelectOption[];
 	secondaryPagadorOptions: SelectOption[];
+	totalAmount: number;
 }
 
 export interface PaymentMethodSectionProps extends BaseFieldSectionProps {

components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog.tsx

@@ -141,6 +141,11 @@ export function LancamentoDialog({
 		return groupAndSortCategorias(filtered);
 	}, [categoriaOptions, formState.transactionType]);
 
+	const totalAmount = useMemo(() => {
+		const parsed = Number.parseFloat(formState.amount);
+		return Number.isNaN(parsed) ? 0 : Math.abs(parsed);
+	}, [formState.amount]);
+
 	const handleFieldChange = useCallback(
 		<Key extends keyof FormState>(key: Key, value: FormState[Key]) => {
 			if (key === "period") {
@@ -223,6 +228,12 @@ export function LancamentoDialog({
 					? formState.secondaryPagadorId
 					: undefined,
 				isSplit: formState.isSplit,
+				primarySplitAmount: formState.isSplit
+					? Number.parseFloat(formState.primarySplitAmount) || undefined
+					: undefined,
+				secondarySplitAmount: formState.isSplit
+					? Number.parseFloat(formState.secondarySplitAmount) || undefined
+					: undefined,
 				contaId: formState.contaId,
 				cartaoId: formState.cartaoId,
 				categoriaId: formState.categoriaId,
@@ -402,6 +413,7 @@ export function LancamentoDialog({
 						onFieldChange={handleFieldChange}
 						pagadorOptions={pagadorOptions}
 						secondaryPagadorOptions={secondaryPagadorOptions}
+						totalAmount={totalAmount}
 					/>
 
 					<PaymentMethodSection

components/lancamentos/dialogs/lancamento-dialog/pagador-section.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useCallback } from "react";
+import { CurrencyInput } from "@/components/ui/currency-input";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
@@ -16,63 +18,46 @@ export function PagadorSection({
 	onFieldChange,
 	pagadorOptions,
 	secondaryPagadorOptions,
+	totalAmount,
 }: PagadorSectionProps) {
+	const handlePrimaryAmountChange = useCallback(
+		(value: string) => {
+			onFieldChange("primarySplitAmount", value);
+			const numericValue = Number.parseFloat(value) || 0;
+			const remaining = Math.max(0, totalAmount - numericValue);
+			onFieldChange("secondarySplitAmount", remaining.toFixed(2));
+		},
+		[totalAmount, onFieldChange],
+	);
+
+	const handleSecondaryAmountChange = useCallback(
+		(value: string) => {
+			onFieldChange("secondarySplitAmount", value);
+			const numericValue = Number.parseFloat(value) || 0;
+			const remaining = Math.max(0, totalAmount - numericValue);
+			onFieldChange("primarySplitAmount", remaining.toFixed(2));
+		},
+		[totalAmount, onFieldChange],
+	);
+
 	return (
 		<div className="flex w-full flex-col gap-2 md:flex-row">
 			<div className="w-full space-y-1">
 				<Label htmlFor="pagador">Pagador</Label>
-				<Select
-					value={formState.pagadorId}
-					onValueChange={(value) => onFieldChange("pagadorId", value)}
-				>
-					<SelectTrigger id="pagador" className="w-full">
-						<SelectValue placeholder="Selecione">
-							{formState.pagadorId &&
-								(() => {
-									const selectedOption = pagadorOptions.find(
-										(opt) => opt.value === formState.pagadorId,
-									);
-									return selectedOption ? (
-										<PagadorSelectContent
-											label={selectedOption.label}
-											avatarUrl={selectedOption.avatarUrl}
-										/>
-									) : null;
-								})()}
-						</SelectValue>
-					</SelectTrigger>
-					<SelectContent>
-						{pagadorOptions.map((option) => (
-							<SelectItem key={option.value} value={option.value}>
-								<PagadorSelectContent
-									label={option.label}
-									avatarUrl={option.avatarUrl}
-								/>
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-			</div>
-
-			{formState.isSplit ? (
-				<div className="w-full space-y-1">
-					<Label htmlFor="secondaryPagador">Dividir com</Label>
+				<div className="flex gap-2">
 					<Select
-						value={formState.secondaryPagadorId}
-						onValueChange={(value) =>
-							onFieldChange("secondaryPagadorId", value)
-						}
+						value={formState.pagadorId}
+						onValueChange={(value) => onFieldChange("pagadorId", value)}
 					>
 						<SelectTrigger
-							id="secondaryPagador"
-							disabled={secondaryPagadorOptions.length === 0}
-							className={"w-full"}
+							id="pagador"
+							className={formState.isSplit ? "w-[55%]" : "w-full"}
 						>
 							<SelectValue placeholder="Selecione">
-								{formState.secondaryPagadorId &&
+								{formState.pagadorId &&
 									(() => {
-										const selectedOption = secondaryPagadorOptions.find(
-											(opt) => opt.value === formState.secondaryPagadorId,
+										const selectedOption = pagadorOptions.find(
+											(opt) => opt.value === formState.pagadorId,
 										);
 										return selectedOption ? (
 											<PagadorSelectContent
@@ -84,7 +69,7 @@ export function PagadorSection({
 							</SelectValue>
 						</SelectTrigger>
 						<SelectContent>
-							{secondaryPagadorOptions.map((option) => (
+							{pagadorOptions.map((option) => (
 								<SelectItem key={option.value} value={option.value}>
 									<PagadorSelectContent
 										label={option.label}
@@ -94,6 +79,65 @@ export function PagadorSection({
 							))}
 						</SelectContent>
 					</Select>
+					{formState.isSplit && (
+						<CurrencyInput
+							value={formState.primarySplitAmount}
+							onValueChange={handlePrimaryAmountChange}
+							placeholder="R$ 0,00"
+							className="h-9 w-[45%] text-sm"
+						/>
+					)}
+				</div>
+			</div>
+
+			{formState.isSplit ? (
+				<div className="w-full space-y-1 mb-1">
+					<Label htmlFor="secondaryPagador">Dividir com</Label>
+					<div className="flex gap-2">
+						<Select
+							value={formState.secondaryPagadorId}
+							onValueChange={(value) =>
+								onFieldChange("secondaryPagadorId", value)
+							}
+						>
+							<SelectTrigger
+								id="secondaryPagador"
+								disabled={secondaryPagadorOptions.length === 0}
+								className="w-[55%]"
+							>
+								<SelectValue placeholder="Selecione">
+									{formState.secondaryPagadorId &&
+										(() => {
+											const selectedOption = secondaryPagadorOptions.find(
+												(opt) => opt.value === formState.secondaryPagadorId,
+											);
+											return selectedOption ? (
+												<PagadorSelectContent
+													label={selectedOption.label}
+													avatarUrl={selectedOption.avatarUrl}
+												/>
+											) : null;
+										})()}
+								</SelectValue>
+							</SelectTrigger>
+							<SelectContent>
+								{secondaryPagadorOptions.map((option) => (
+									<SelectItem key={option.value} value={option.value}>
+										<PagadorSelectContent
+											label={option.label}
+											avatarUrl={option.avatarUrl}
+										/>
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<CurrencyInput
+							value={formState.secondarySplitAmount}
+							onValueChange={handleSecondaryAmountChange}
+							placeholder="R$ 0,00"
+							className="h-9 w-[45%] text-sm"
+						/>
+					</div>
 				</div>
 			) : null}
 		</div>