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/pagadores/details/pagador-info-card.tsx

@@ -148,7 +148,7 @@ export function PagadorInfoCard({
 							alt={`Avatar de ${pagador.name}`}
 							width={64}
 							height={64}
-							className="h-full w-full object-cover"
+							className="h-full w-full object-cover rounded-full"
 						/>
 					</div>
 
@@ -214,7 +214,7 @@ export function PagadorInfoCard({
 								{pagador.email}
 							</Link>
 						) : (
-							"—"
+							"Sem e-mail cadastrado"
 						)
 					}
 				/>
@@ -260,7 +260,7 @@ export function PagadorInfoCard({
 						pagador.note ? (
 							<span className="text-muted-foreground">{pagador.note}</span>
 						) : (
-							"—"
+							"Sem observações"
 						)
 					}
 					className="sm:col-span-2"

components/pagadores/pagador-card.tsx

@@ -63,7 +63,7 @@ export function PagadorCard({ pagador, onEdit, onRemove }: PagadorCardProps) {
 					<p className="mt-1 text-xs text-muted-foreground">{pagador.email}</p>
 				) : (
 					<p className="mt-1 text-xs text-muted-foreground">
-						Sem Email cadastrado
+						Sem email cadastrado
 					</p>
 				)}
 

components/pagadores/pagador-dialog.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { RiCheckLine, RiCloseCircleLine } from "@remixicon/react";
 import Image from "next/image";
 import {
 	useCallback,
@@ -33,7 +32,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import { useControlledState } from "@/hooks/use-controlled-state";
 import { useFormState } from "@/hooks/use-form-state";
 import {
@@ -270,16 +268,9 @@ export function PagadorDialog({
 								</div>
 							</fieldset>
 
-							<fieldset className="flex flex-col gap-3">
-								<div className="grid grid-cols-4 gap-3 sm:grid-cols-5">
-									{availableAvatars.length === 0 ? (
-										<div className="col-span-5 flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border/60 bg-muted/10 p-6 text-center text-sm text-muted-foreground">
-											<RiCloseCircleLine className="size-6" />
-											Nenhum avatar disponível. Adicione imagens em
-											<span className="font-mono text-xs">public/avatares</span>
-											.
-										</div>
-									) : null}
+							<fieldset className="flex flex-col gap-2">
+								<Label>Avatar</Label>
+								<div className="flex flex-wrap gap-3">
 									{availableAvatars.map((avatar) => {
 										const isSelected = avatar === formState.avatarUrl;
 										return (
@@ -287,22 +278,16 @@ export function PagadorDialog({
 												type="button"
 												key={avatar}
 												onClick={() => updateField("avatarUrl", avatar)}
-												className="group relative flex items-center justify-center overflow-hidden rounded-xl border border-border/70 p-2 transition-all hover:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 data-[selected=true]:border-primary data-[selected=true]:bg-primary/10"
+												className="group relative flex items-center justify-center rounded-full p-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
 												data-selected={isSelected}
 												aria-pressed={isSelected}
 											>
-												<span className="absolute inset-0 rounded-xl border-2 border-primary/80 opacity-0 transition-opacity group-data-[selected=true]:opacity-100" />
-												{isSelected ? (
-													<span className="absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-sidebar-foreground text-primary-foreground shadow-sm">
-														<RiCheckLine className="size-3.5" />
-													</span>
-												) : null}
 												<Image
 													src={getAvatarSrc(avatar)}
 													alt={`Avatar ${avatar}`}
-													width={72}
-													height={72}
-													className="size-12 rounded-lg object-cover"
+													width={40}
+													height={40}
+													className="size-12 rounded-full object-cove hover:scale-110 transition-transform duration-200"
 												/>
 											</button>
 										);
@@ -312,12 +297,11 @@ export function PagadorDialog({
 
 							<div className="flex flex-col gap-2">
 								<Label htmlFor="pagador-note">Anotações</Label>
-								<Textarea
+								<Input
 									id="pagador-note"
-									rows={2}
 									value={formState.note}
 									onChange={(event) => updateField("note", event.target.value)}
-									placeholder="Observações, preferências ou detalhes relevantes sobre este pagador"
+									placeholder="Observações sobre este pagador"
 								/>
 							</div>
 						</div>

components/pagadores/pagador-select-items.tsx

@@ -8,7 +8,7 @@ export function StatusSelectContent({ label }: { label: string }) {
 	return (
 		<span className="flex items-center gap-2">
 			<DotIcon
-				bg_dot={
+				color={
 					isActive
 						? "bg-emerald-600 dark:bg-emerald-300"
 						: "bg-slate-400 dark:bg-slate-500"