refactor(core): move app para src e padroniza estrutura

src/features/payers/components/details/payer-card-usage-card.tsx

@@ -0,0 +1,81 @@
+import { RiBankCard2Line } from "@remixicon/react";
+import Image from "next/image";
+import MoneyValues from "@/shared/components/money-values";
+import { CardContent } from "@/shared/components/ui/card";
+import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import type { PagadorCardUsageItem } from "@/shared/lib/payers/details";
+
+const buildInitials = (value: string) => {
+	const parts = value.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "CC";
+	if (parts.length === 1) {
+		const firstPart = parts[0];
+		return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CC";
+	}
+	const firstChar = parts[0]?.[0] ?? "";
+	const secondChar = parts[1]?.[0] ?? "";
+	return `${firstChar}${secondChar}`.toUpperCase() || "CC";
+};
+
+type PagadorCardUsageCardProps = {
+	items: PagadorCardUsageItem[];
+};
+
+export function PagadorCardUsageCard({ items }: PagadorCardUsageCardProps) {
+	if (items.length === 0) {
+		return (
+			<CardContent className="px-0">
+				<WidgetEmptyState
+					icon={<RiBankCard2Line className="size-6 text-muted-foreground" />}
+					title="Nenhum lançamento com cartão de crédito"
+					description="Quando houver despesas registradas com cartão, elas aparecerão aqui."
+				/>
+			</CardContent>
+		);
+	}
+
+	return (
+		<CardContent className="flex flex-col gap-4 px-0">
+			<ul className="flex flex-col">
+				{items.map((item) => {
+					const logoPath = resolveLogoSrc(item.logo);
+					const initials = buildInitials(item.name);
+					return (
+						<li
+							key={item.id}
+							className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
+						>
+							<div className="flex min-w-0 flex-1 items-center gap-2 py-2">
+								<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full">
+									{logoPath ? (
+										<Image
+											src={logoPath}
+											alt={`Logo do cartão ${item.name}`}
+											width={36}
+											height={36}
+											className="h-full w-full object-contain"
+										/>
+									) : (
+										<span className="text-sm font-semibold uppercase text-muted-foreground">
+											{initials}
+										</span>
+									)}
+								</div>
+								<div className="min-w-0">
+									<span className="block truncate text-sm font-medium text-foreground">
+										{item.name}
+									</span>
+									<span className="text-xs text-muted-foreground">
+										Despesas no mês
+									</span>
+								</div>
+							</div>
+							<MoneyValues amount={item.amount} />
+						</li>
+					);
+				})}
+			</ul>
+		</CardContent>
+	);
+}

src/features/payers/components/details/payer-header-card.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import {
+	RiBankCard2Line,
+	RiBillLine,
+	RiExchangeDollarLine,
+	RiMailLine,
+	RiMailSendLine,
+	RiVerifiedBadgeFill,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import { sendPagadorSummaryAction } from "@/features/payers/detail-actions";
+import { Badge } from "@/shared/components/ui/badge";
+import { Button } from "@/shared/components/ui/button";
+import {
+	Card,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import { formatCurrency } from "@/shared/utils/currency";
+import { formatDateTime } from "@/shared/utils/date";
+import type { PagadorInfo, PagadorSummaryPreview } from "./types";
+
+type PagadorHeaderCardProps = {
+	pagador: PagadorInfo;
+	selectedPeriod: string;
+	summary: PagadorSummaryPreview;
+};
+
+export function PagadorHeaderCard({
+	pagador,
+	selectedPeriod,
+	summary,
+}: PagadorHeaderCardProps) {
+	const router = useRouter();
+	const [isSending, startTransition] = useTransition();
+	const [confirmOpen, setConfirmOpen] = useState(false);
+
+	const avatarSrc = getAvatarSrc(pagador.avatarUrl);
+	const createdAtLabel = formatDate(pagador.createdAt);
+	const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
+
+	const lastMailLabel =
+		formatDateTime(pagador.lastMailAt, {
+			dateStyle: "short",
+			timeStyle: "short",
+		}) ?? "Nunca enviado";
+
+	const disableSend = isSending || !pagador.email || !pagador.canEdit;
+
+	const openConfirmDialog = () => {
+		if (!pagador.email) {
+			toast.error("Cadastre um e-mail para este pagador antes de enviar.");
+			return;
+		}
+		setConfirmOpen(true);
+	};
+
+	const handleSendSummary = () => {
+		if (!pagador.email) {
+			toast.error("Cadastre um e-mail para este pagador antes de enviar.");
+			return;
+		}
+
+		startTransition(async () => {
+			const result = await sendPagadorSummaryAction({
+				pagadorId: pagador.id,
+				period: selectedPeriod,
+			});
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success(result.message);
+			setConfirmOpen(false);
+			router.refresh();
+		});
+	};
+
+	const getStatusBadgeVariant = (status: string): "success" | "outline" => {
+		const normalizedStatus = status.toLowerCase();
+		if (normalizedStatus === "ativo") {
+			return "success";
+		}
+		return "outline";
+	};
+
+	return (
+		<Card className="mb-2 border gap-4">
+			<CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+				<div className="flex flex-1 items-start gap-4">
+					<div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden">
+						<Image
+							src={avatarSrc}
+							alt={`Avatar de ${pagador.name}`}
+							width={64}
+							height={64}
+							className="h-full w-full rounded-full object-cover"
+						/>
+					</div>
+
+					<div className="flex flex-1 flex-col gap-2">
+						<div className="flex flex-wrap items-center gap-2">
+							<CardTitle className="text-xl font-semibold text-foreground">
+								{pagador.name}
+							</CardTitle>
+							{isAdmin ? (
+								<RiVerifiedBadgeFill
+									className="size-4 text-sky-500"
+									aria-hidden
+								/>
+							) : null}
+							<Badge
+								variant={getStatusBadgeVariant(pagador.status)}
+								className="text-xs"
+							>
+								{pagador.status}
+							</Badge>
+							{pagador.isAutoSend ? (
+								<Badge variant="info" className="gap-1 text-xs">
+									<RiMailSendLine className="size-3.5" aria-hidden />
+									Envio automático
+								</Badge>
+							) : null}
+						</div>
+
+						<CardDescription className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+							<span>Criado em {createdAtLabel}</span>
+							<span className="hidden text-border/80 sm:inline">•</span>
+							{pagador.email ? (
+								<Link
+									prefetch
+									href={`mailto:${pagador.email}`}
+									className="inline-flex items-center gap-1.5 text-primary"
+								>
+									<RiMailLine className="size-4" aria-hidden />
+									{pagador.email}
+								</Link>
+							) : (
+								<span>Sem e-mail cadastrado</span>
+							)}
+						</CardDescription>
+					</div>
+				</div>
+
+				<div className="flex w-full flex-col items-stretch gap-2 lg:w-auto lg:items-end">
+					{pagador.canEdit ? (
+						<>
+							<Button
+								type="button"
+								size="sm"
+								onClick={openConfirmDialog}
+								disabled={disableSend}
+								className="w-full min-w-[180px] lg:w-auto"
+							>
+								{isSending ? "Enviando..." : "Enviar resumo"}
+							</Button>
+							<span className="text-xs text-muted-foreground">
+								Último envio: {lastMailLabel}
+							</span>
+						</>
+					) : (
+						<Badge variant="outline" className="justify-center text-xs">
+							Acesso somente leitura
+						</Badge>
+					)}
+				</div>
+			</CardHeader>
+
+			{pagador.canEdit ? (
+				<Dialog
+					open={confirmOpen}
+					onOpenChange={(open) => {
+						if (isSending) return;
+						setConfirmOpen(open);
+					}}
+				>
+					<DialogContent className="max-w-2xl">
+						<DialogHeader>
+							<DialogTitle>Confirmar envio do resumo</DialogTitle>
+							<DialogDescription>
+								Resumo de{" "}
+								<span className="font-semibold text-foreground">
+									{summary.periodLabel}
+								</span>{" "}
+								para{" "}
+								<span className="font-medium text-foreground">
+									{pagador.email}
+								</span>
+							</DialogDescription>
+						</DialogHeader>
+
+						<div className="space-y-4">
+							<div className="rounded-lg border p-4">
+								<div className="flex items-center justify-between">
+									<div className="flex items-center gap-3">
+										<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
+											<RiExchangeDollarLine className="size-5 text-primary" />
+										</div>
+										<div>
+											<p className="text-sm font-medium text-muted-foreground">
+												Total de Despesas
+											</p>
+											<p className="text-2xl font-bold text-foreground">
+												{formatCurrency(summary.totalExpenses)}
+											</p>
+										</div>
+									</div>
+									<div className="text-right">
+										<p className="text-sm text-muted-foreground">
+											{summary.lancamentoCount} lançamentos
+										</p>
+									</div>
+								</div>
+							</div>
+
+							<div className="grid gap-3 sm:grid-cols-3">
+								<div className="rounded-lg border p-3">
+									<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+										<RiBankCard2Line className="size-4" />
+										<span className="text-xs font-semibold uppercase">
+											Cartões
+										</span>
+									</div>
+									<p className="text-lg font-bold text-foreground">
+										{formatCurrency(summary.paymentSplits.card)}
+									</p>
+								</div>
+
+								<div className="rounded-lg border p-3">
+									<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+										<RiBillLine className="size-4" />
+										<span className="text-xs font-semibold uppercase">
+											Boletos
+										</span>
+									</div>
+									<p className="text-lg font-bold text-foreground">
+										{formatCurrency(summary.paymentSplits.boleto)}
+									</p>
+								</div>
+
+								<div className="rounded-lg border p-3">
+									<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+										<RiExchangeDollarLine className="size-4" />
+										<span className="text-xs font-semibold uppercase">
+											Pix/Débito
+										</span>
+									</div>
+									<p className="text-lg font-bold text-foreground">
+										{formatCurrency(summary.paymentSplits.instant)}
+									</p>
+								</div>
+							</div>
+
+							<div className="space-y-3">
+								{summary.cardUsage.length > 0 && (
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2">
+											<RiBankCard2Line className="size-4 text-muted-foreground" />
+											<span className="text-xs font-semibold uppercase text-muted-foreground">
+												Cartões Utilizados
+											</span>
+										</div>
+										<div className="space-y-1">
+											{summary.cardUsage.map((card, index) => (
+												<div
+													key={index}
+													className="flex items-center justify-between text-sm"
+												>
+													<span className="text-foreground">{card.name}</span>
+													<span className="font-medium text-foreground">
+														{formatCurrency(card.amount)}
+													</span>
+												</div>
+											))}
+										</div>
+									</div>
+								)}
+
+								{(summary.boletoStats.paidCount > 0 ||
+									summary.boletoStats.pendingCount > 0) && (
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2">
+											<RiBillLine className="size-4 text-muted-foreground" />
+											<span className="text-xs font-semibold uppercase text-muted-foreground">
+												Status de Boletos
+											</span>
+										</div>
+										<div className="grid gap-2 sm:grid-cols-2">
+											<div>
+												<p className="text-xs text-muted-foreground">Pagos</p>
+												<p className="text-sm font-semibold text-success">
+													{formatCurrency(summary.boletoStats.paidAmount)}{" "}
+													<span className="text-xs font-normal">
+														({summary.boletoStats.paidCount})
+													</span>
+												</p>
+											</div>
+											<div>
+												<p className="text-xs text-muted-foreground">
+													Pendentes
+												</p>
+												<p className="text-sm font-semibold text-warning">
+													{formatCurrency(summary.boletoStats.pendingAmount)}{" "}
+													<span className="text-xs font-normal">
+														({summary.boletoStats.pendingCount})
+													</span>
+												</p>
+											</div>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+
+						<DialogFooter>
+							<Button
+								type="button"
+								variant="outline"
+								disabled={isSending}
+								onClick={() => setConfirmOpen(false)}
+							>
+								Cancelar
+							</Button>
+							<Button
+								type="button"
+								onClick={handleSendSummary}
+								disabled={disableSend}
+							>
+								{isSending ? "Enviando..." : "Confirmar envio"}
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			) : null}
+		</Card>
+	);
+}
+
+const formatDate = (value: string) => {
+	return (
+		formatDateTime(value, {
+			day: "2-digit",
+			month: "long",
+			year: "numeric",
+		}) ?? "—"
+	);
+};

src/features/payers/components/details/payer-history-card.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { RiBarChartLine } from "@remixicon/react";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	LabelList,
+	type LabelProps,
+	XAxis,
+} from "recharts";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "@/shared/components/ui/chart";
+import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
+import type { PagadorHistoryPoint } from "@/shared/lib/payers/details";
+import { currencyFormatter } from "@/shared/utils/currency";
+
+const chartConfig = {
+	despesas: {
+		label: "Despesas",
+		color: "hsl(356, 72%, 50%)",
+	},
+};
+
+type PagadorHistoryCardProps = {
+	data: PagadorHistoryPoint[];
+};
+
+const ValueLabel = (props: LabelProps) => {
+	const { x, y, value, width } = props;
+	if (typeof x !== "number" || typeof y !== "number" || width === undefined) {
+		return null;
+	}
+	const labelX = x + (Number(width) ?? 0) / 2;
+	const amount =
+		typeof value === "number" ? currencyFormatter.format(value) : value;
+	const labelY = Math.max(y - 6, 12);
+	return (
+		<text
+			x={labelX}
+			y={labelY}
+			fill="currentColor"
+			textAnchor="middle"
+			className="text-[11px] font-semibold text-muted-foreground"
+		>
+			{amount}
+		</text>
+	);
+};
+
+export function PagadorHistoryCard({ data }: PagadorHistoryCardProps) {
+	const hasData = data.length > 0;
+
+	return (
+		<Card className="border">
+			<CardHeader className="gap-1.5 pb-3">
+				<CardTitle className="text-lg font-semibold">
+					Evolução (últimos 6 meses)
+				</CardTitle>
+				<p className="text-xs text-muted-foreground">
+					Despesas registradas para este pagador ao longo do tempo.
+				</p>
+			</CardHeader>
+
+			<CardContent className="pt-0">
+				{hasData ? (
+					<ChartContainer
+						config={chartConfig}
+						className="mx-auto flex h-[210px] w-full max-w-[520px] items-center justify-center aspect-auto"
+					>
+						<BarChart
+							data={data}
+							barCategoryGap={16}
+							margin={{ top: 28, right: 8, left: 8, bottom: 0 }}
+						>
+							<CartesianGrid strokeDasharray="3 3" vertical={false} />
+							<XAxis
+								dataKey="label"
+								tickLine={false}
+								axisLine={false}
+								tickMargin={8}
+							/>
+							<ChartTooltip content={<ChartTooltipContent />} />
+							<Bar
+								dataKey="despesas"
+								fill="var(--color-despesas)"
+								radius={[6, 6, 0, 0]}
+							>
+								<LabelList dataKey="despesas" content={<ValueLabel />} />
+							</Bar>
+						</BarChart>
+					</ChartContainer>
+				) : (
+					<WidgetEmptyState
+						icon={<RiBarChartLine className="size-6 text-muted-foreground" />}
+						title="Sem dados para exibir"
+						description="Ainda não há movimentações suficientes para gerar este gráfico."
+					/>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

src/features/payers/components/details/payer-info-card.tsx

@@ -0,0 +1,127 @@
+import { RiUser3Line } from "@remixicon/react";
+import type { ReactNode } from "react";
+import { Badge } from "@/shared/components/ui/badge";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
+import { formatDateTime } from "@/shared/utils/date";
+import { cn } from "@/shared/utils/ui";
+import type { PagadorInfo } from "./types";
+
+type PagadorInfoCardProps = {
+	pagador: PagadorInfo;
+};
+
+export function PagadorInfoCard({ pagador }: PagadorInfoCardProps) {
+	const showSensitiveDetails = pagador.canEdit;
+
+	const getStatusBadgeVariant = (status: string): "success" | "outline" => {
+		const normalizedStatus = status.toLowerCase();
+		if (normalizedStatus === "ativo") {
+			return "success";
+		}
+		return "outline";
+	};
+
+	return (
+		<Card className="border gap-4">
+			<CardHeader className="gap-1.5">
+				<CardTitle className="text-lg font-semibold">
+					Detalhes do pagador
+				</CardTitle>
+				<CardDescription>
+					{showSensitiveDetails
+						? "Informações cadastrais e preferências de envio."
+						: "Informações cadastrais visíveis para este compartilhamento."}
+				</CardDescription>
+			</CardHeader>
+
+			<CardContent className="grid gap-4 border-t border-dashed border-border/60 pt-6 text-sm sm:grid-cols-2">
+				<InfoItem
+					label="Status"
+					value={
+						<Badge
+							variant={getStatusBadgeVariant(pagador.status)}
+							className="text-xs"
+						>
+							{pagador.status}
+						</Badge>
+					}
+				/>
+
+				<InfoItem
+					label="Papel"
+					value={
+						<span className="inline-flex items-center gap-2">
+							<RiUser3Line className="size-4 text-muted-foreground" />
+							{resolveRoleLabel(pagador.role)}
+						</span>
+					}
+				/>
+				{showSensitiveDetails ? (
+					<InfoItem
+						label="Envio automático"
+						value={pagador.isAutoSend ? "Ativado" : "Desativado"}
+					/>
+				) : null}
+				{showSensitiveDetails ? (
+					<InfoItem
+						label="Último envio"
+						value={formatDateTime(pagador.lastMailAt) ?? "Nunca enviado"}
+					/>
+				) : null}
+				{showSensitiveDetails && !pagador.email ? (
+					<InfoItem
+						label="Aviso"
+						value={
+							<span className="text-[13px] text-warning">
+								Cadastre um e-mail para permitir o envio automático.
+							</span>
+						}
+						className="sm:col-span-2"
+					/>
+				) : null}
+				{showSensitiveDetails ? (
+					<InfoItem
+						label="Observações"
+						value={
+							pagador.note ? (
+								<span className="text-muted-foreground">{pagador.note}</span>
+							) : (
+								"Sem observações"
+							)
+						}
+						className="sm:col-span-2"
+					/>
+				) : null}
+			</CardContent>
+		</Card>
+	);
+}
+
+const resolveRoleLabel = (role: string | null) => {
+	if (role === PAGADOR_ROLE_ADMIN) return "Administrador";
+	return "Pagador";
+};
+
+type InfoItemProps = {
+	label: string;
+	value: ReactNode;
+	className?: string;
+};
+
+function InfoItem({ label, value, className }: InfoItemProps) {
+	return (
+		<div className={cn("space-y-1", className)}>
+			<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground/80">
+				{label}
+			</span>
+			<div className="text-base text-foreground">{value}</div>
+		</div>
+	);
+}

src/features/payers/components/details/payer-leave-share-card.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { RiLogoutBoxLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import { deletePagadorShareAction } from "@/features/payers/actions";
+import { Button } from "@/shared/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import { formatDateTime } from "@/shared/utils/date";
+
+interface PagadorLeaveShareCardProps {
+	shareId: string;
+	pagadorName: string;
+	createdAt: string;
+}
+
+export function PagadorLeaveShareCard({
+	shareId,
+	pagadorName,
+	createdAt,
+}: PagadorLeaveShareCardProps) {
+	const router = useRouter();
+	const [isPending, startTransition] = useTransition();
+	const [showConfirm, setShowConfirm] = useState(false);
+
+	const handleLeave = () => {
+		startTransition(async () => {
+			const result = await deletePagadorShareAction({ shareId });
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success("Você saiu do compartilhamento.");
+			router.push("/payers");
+		});
+	};
+
+	const formattedDate =
+		formatDateTime(createdAt, {
+			day: "2-digit",
+			month: "long",
+			year: "numeric",
+		}) ?? "—";
+
+	return (
+		<Card className="border">
+			<CardHeader>
+				<CardTitle className="text-base font-semibold">
+					Acesso Compartilhado
+				</CardTitle>
+				<p className="text-sm text-muted-foreground">
+					Você tem acesso somente leitura aos dados de{" "}
+					<strong>{pagadorName}</strong>.
+				</p>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
+					<span className="text-xs font-semibold uppercase text-muted-foreground/80">
+						Informações do compartilhamento
+					</span>
+					<div className="flex flex-col gap-1">
+						<p className="text-sm">
+							<span className="text-muted-foreground">Acesso desde:</span>{" "}
+							<strong>{formattedDate}</strong>
+						</p>
+						<p className="text-sm text-muted-foreground">
+							Você pode visualizar os lançamentos, mas não pode criar ou editar.
+						</p>
+					</div>
+				</div>
+
+				{!showConfirm ? (
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => setShowConfirm(true)}
+						className="w-full"
+					>
+						<RiLogoutBoxLine className="size-4" />
+						Sair do compartilhamento
+					</Button>
+				) : (
+					<div className="space-y-2">
+						<p className="text-sm font-medium text-destructive">
+							Tem certeza que deseja sair? Você perderá o acesso aos dados de{" "}
+							{pagadorName}.
+						</p>
+						<div className="flex gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => setShowConfirm(false)}
+								disabled={isPending}
+								className="flex-1"
+							>
+								Cancelar
+							</Button>
+							<Button
+								type="button"
+								variant="destructive"
+								onClick={handleLeave}
+								disabled={isPending}
+								className="flex-1"
+							>
+								{isPending ? "Saindo..." : "Confirmar saída"}
+							</Button>
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

src/features/payers/components/details/payer-monthly-summary-card.tsx

@@ -0,0 +1,124 @@
+import type { CSSProperties } from "react";
+import MoneyValues from "@/shared/components/money-values";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import type { PagadorMonthlyBreakdown } from "@/shared/lib/payers/details";
+import { cn } from "@/shared/utils/ui";
+
+const segmentConfig = {
+	card: {
+		label: "Cartões",
+		color: "bg-violet-500",
+	},
+	boleto: {
+		label: "Boletos",
+		color: "bg-amber-500",
+	},
+	instant: {
+		label: "Pix/Débito/Dinheiro",
+		color: "bg-emerald-500",
+	},
+} as const;
+
+type PagadorMonthlySummaryCardProps = {
+	periodLabel: string;
+	breakdown: PagadorMonthlyBreakdown;
+};
+
+export function PagadorMonthlySummaryCard({
+	periodLabel,
+	breakdown,
+}: PagadorMonthlySummaryCardProps) {
+	const splittableEntries = (
+		Object.keys(segmentConfig) as Array<keyof typeof segmentConfig>
+	).map((key) => ({
+		key,
+		...segmentConfig[key],
+		value: breakdown.paymentSplits[key],
+	}));
+
+	const totalBase = splittableEntries.reduce(
+		(sum, entry) => sum + entry.value,
+		0,
+	);
+
+	let offset = 0;
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-col gap-1.5">
+				<CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
+				<p className="text-xs text-muted-foreground">
+					{periodLabel} - Despesas por forma de pagamento
+				</p>
+			</CardHeader>
+
+			<CardContent className="space-y-4 pt-0">
+				<div className="space-y-2">
+					<div>
+						<span className="text-xs tracking-wide text-muted-foreground">
+							Total
+						</span>
+						<MoneyValues
+							amount={breakdown.totalExpenses}
+							className="block text-2xl font-semibold text-foreground"
+						/>
+					</div>
+
+					<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
+						{splittableEntries.map((entry) => {
+							const percent =
+								totalBase > 0
+									? Math.max((entry.value / totalBase) * 100, 0)
+									: 0;
+							const style: CSSProperties = {
+								width: `${percent}%`,
+								left: `${offset}%`,
+							};
+							offset += percent;
+							return (
+								<span
+									key={entry.key}
+									className={cn(
+										"absolute inset-y-0 rounded-full transition-all",
+										entry.color,
+									)}
+									style={style}
+								/>
+							);
+						})}
+					</div>
+				</div>
+
+				<div className="grid gap-3 sm:grid-cols-3">
+					{splittableEntries.map((entry) => {
+						const percent =
+							totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
+						return (
+							<div key={entry.key} className="space-y-1 rounded-lg border p-3">
+								<span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+									<span
+										className={cn("size-2 rounded-full", entry.color)}
+										aria-hidden
+									/>
+									{entry.label}
+								</span>
+								<MoneyValues
+									amount={entry.value}
+									className="block text-lg font-semibold text-foreground"
+								/>
+								<span className="text-xs text-muted-foreground">
+									{percent}% das despesas
+								</span>
+							</div>
+						);
+					})}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

src/features/payers/components/details/payer-payment-method-cards.tsx

@@ -0,0 +1,140 @@
+import {
+	RiBarcodeLine,
+	RiCheckboxCircleLine,
+	RiHourglass2Line,
+	RiWallet3Line,
+} from "@remixicon/react";
+import { buildBillStatusLabel } from "@/features/dashboard/bills-helpers";
+import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
+import MoneyValues from "@/shared/components/money-values";
+import { CardContent } from "@/shared/components/ui/card";
+import { Progress } from "@/shared/components/ui/progress";
+import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
+import type {
+	PagadorBoletoItem,
+	PagadorPaymentStatusData,
+} from "@/shared/lib/payers/details";
+import { cn } from "@/shared/utils/ui";
+
+// --- PagadorBoletoCard ---
+
+type PagadorBoletoCardProps = {
+	items: PagadorBoletoItem[];
+};
+
+export function PagadorBoletoCard({ items }: PagadorBoletoCardProps) {
+	if (items.length === 0) {
+		return (
+			<CardContent className="px-0">
+				<WidgetEmptyState
+					icon={<RiBarcodeLine className="size-6 text-muted-foreground" />}
+					title="Nenhum boleto cadastrado para o período"
+					description="Quando houver despesas registradas com boleto, elas aparecerão aqui."
+				/>
+			</CardContent>
+		);
+	}
+
+	return (
+		<CardContent className="flex flex-col gap-4 px-0">
+			<ul className="flex flex-col">
+				{items.map((item) => {
+					const statusLabel = buildBillStatusLabel(item);
+					return (
+						<li
+							key={item.id}
+							className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
+						>
+							<div className="flex min-w-0 flex-1 items-center gap-3 py-2">
+								<EstabelecimentoLogo name={item.name} size={36} />
+								<div className="min-w-0">
+									<span className="block truncate text-sm font-medium text-foreground">
+										{item.name}
+									</span>
+									{statusLabel ? (
+										<span
+											className={cn(
+												"text-xs text-muted-foreground",
+												item.isSettled && "text-success",
+											)}
+										>
+											{statusLabel}
+										</span>
+									) : null}
+								</div>
+							</div>
+							<MoneyValues amount={item.amount} />
+						</li>
+					);
+				})}
+			</ul>
+		</CardContent>
+	);
+}
+
+// --- PagadorPaymentStatusCard ---
+
+type PagadorPaymentStatusCardProps = {
+	data: PagadorPaymentStatusData;
+};
+
+export function PagadorPaymentStatusCard({
+	data,
+}: PagadorPaymentStatusCardProps) {
+	const { paidAmount, paidCount, pendingAmount, pendingCount, totalAmount } =
+		data;
+
+	if (totalAmount === 0) {
+		return (
+			<CardContent className="px-0">
+				<WidgetEmptyState
+					icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
+					title="Nenhuma despesa no período"
+					description="Registre lançamentos para visualizar o status de pagamento."
+				/>
+			</CardContent>
+		);
+	}
+
+	const paidPercentage = (paidAmount / totalAmount) * 100;
+
+	return (
+		<CardContent className="space-y-6 px-0">
+			<div className="space-y-2">
+				<div className="flex items-center justify-between">
+					<span className="text-sm font-medium text-foreground">Pago</span>
+					<MoneyValues amount={paidAmount} />
+				</div>
+				<Progress value={paidPercentage} className="h-2" />
+				<div className="flex items-center justify-between gap-4 text-sm">
+					<div className="flex items-center gap-1.5">
+						<RiCheckboxCircleLine className="size-3 text-success" />
+						<MoneyValues amount={paidAmount} />
+						<span className="text-xs text-muted-foreground">
+							({paidCount} registro{paidCount !== 1 ? "s" : ""})
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div className="border-t border-dashed" />
+
+			<div className="space-y-2">
+				<div className="flex items-center justify-between">
+					<span className="text-sm font-medium text-foreground">Pendente</span>
+					<MoneyValues amount={pendingAmount} />
+				</div>
+				<Progress value={100 - paidPercentage} className="h-2" />
+				<div className="flex items-center justify-between gap-4 text-sm">
+					<div className="flex items-center gap-1.5">
+						<RiHourglass2Line className="size-3 text-warning" />
+						<MoneyValues amount={pendingAmount} />
+						<span className="text-xs text-muted-foreground">
+							({pendingCount} registro{pendingCount !== 1 ? "s" : ""})
+						</span>
+					</div>
+				</div>
+			</div>
+		</CardContent>
+	);
+}

src/features/payers/components/details/payer-sharing-card.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { RiDeleteBin5Line } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import {
+	deletePagadorShareAction,
+	regeneratePagadorShareCodeAction,
+} from "@/features/payers/actions";
+import { Button } from "@/shared/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+
+type PagadorShare = {
+	id: string;
+	userId: string;
+	name: string;
+	email: string;
+	createdAt: string;
+};
+
+interface PagadorSharingCardProps {
+	pagadorId: string;
+	shareCode: string;
+	shares: PagadorShare[];
+}
+
+export function PagadorSharingCard({
+	pagadorId,
+	shareCode,
+	shares,
+}: PagadorSharingCardProps) {
+	const router = useRouter();
+	const [currentCode, setCurrentCode] = useState(shareCode);
+	const [regeneratePending, startRegenerate] = useTransition();
+	const [removePendingId, setRemovePendingId] = useState<string | null>(null);
+
+	const handleCopyCode = async () => {
+		try {
+			await navigator.clipboard.writeText(currentCode);
+			toast.success("Código copiado para a área de transferência.");
+		} catch {
+			toast.error("Não foi possível copiar o código.");
+		}
+	};
+
+	const handleRegenerate = () => {
+		startRegenerate(async () => {
+			const result = await regeneratePagadorShareCodeAction({ pagadorId });
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			setCurrentCode(result.code);
+			toast.success("Novo código gerado com sucesso.");
+			router.refresh();
+		});
+	};
+
+	const handleRemove = (shareId: string) => {
+		setRemovePendingId(shareId);
+		startRegenerate(async () => {
+			const result = await deletePagadorShareAction({ shareId });
+
+			if (!result.success) {
+				toast.error(result.error);
+				setRemovePendingId(null);
+				return;
+			}
+
+			toast.success(result.message);
+			setRemovePendingId(null);
+			router.refresh();
+		});
+	};
+
+	return (
+		<Card className="border">
+			<CardHeader>
+				<CardTitle className="text-lg font-semibold">
+					Compartilhamentos
+				</CardTitle>
+				<p className="text-sm text-muted-foreground">
+					Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
+					na página de pagadores usando a opção Adicionar por código para ter
+					acesso somente leitura.
+				</p>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
+					<span className="text-xs font-semibold uppercase text-muted-foreground/80">
+						Código de compartilhamento
+					</span>
+					<div className="flex flex-wrap items-center gap-2">
+						<code className="rounded bg-muted px-2 py-1 text-xs font-mono">
+							{currentCode}
+						</code>
+						<Button
+							type="button"
+							size="sm"
+							variant="outline"
+							onClick={handleCopyCode}
+						>
+							Copiar
+						</Button>
+						<Button
+							type="button"
+							size="sm"
+							onClick={handleRegenerate}
+							disabled={regeneratePending}
+						>
+							{regeneratePending ? "Gerando..." : "Gerar novo código"}
+						</Button>
+					</div>
+					<p className="text-xs text-muted-foreground">
+						Gerar um novo código não remove acessos existentes, apenas impede
+						que novos convites usem o código anterior.
+					</p>
+				</div>
+
+				{shares.length === 0 ? (
+					<p className="text-sm text-muted-foreground">
+						Nenhum usuário com acesso de leitura.
+					</p>
+				) : (
+					<ul className="space-y-3">
+						{shares.map((share) => (
+							<li
+								key={share.id}
+								className="flex items-center justify-between rounded-lg border border-dashed p-4 text-sm"
+							>
+								<div className="flex flex-col">
+									<span className="font-medium text-foreground">
+										{share.name}
+									</span>
+									<span className="text-muted-foreground">{share.email}</span>
+									<span className="text-xs text-muted-foreground/80">
+										ID: ****{share.userId.slice(-4)}
+									</span>
+								</div>
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon-sm"
+									onClick={() => handleRemove(share.id)}
+									disabled={removePendingId === share.id}
+								>
+									<RiDeleteBin5Line className="size-4" />
+									<span className="sr-only">Remover acesso</span>
+								</Button>
+							</li>
+						))}
+					</ul>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

src/features/payers/components/details/types.ts

@@ -0,0 +1,33 @@
+export type PagadorInfo = {
+	id: string;
+	name: string;
+	email: string | null;
+	avatarUrl: string | null;
+	status: string;
+	note: string | null;
+	role: string | null;
+	isAutoSend: boolean;
+	createdAt: string;
+	lastMailAt: string | null;
+	shareCode: string | null;
+	canEdit: boolean;
+};
+
+export type PagadorSummaryPreview = {
+	periodLabel: string;
+	totalExpenses: number;
+	paymentSplits: {
+		card: number;
+		boleto: number;
+		instant: number;
+	};
+	cardUsage: { name: string; amount: number }[];
+	boletoStats: {
+		totalAmount: number;
+		paidAmount: number;
+		pendingAmount: number;
+		paidCount: number;
+		pendingCount: number;
+	};
+	lancamentoCount: number;
+};

src/features/payers/components/payer-card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import {
+	RiDeleteBin5Line,
+	RiFileList2Line,
+	RiMailSendLine,
+	RiPencilLine,
+	RiVerifiedBadgeFill,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { Badge } from "@/shared/components/ui/badge";
+import { Card } from "@/shared/components/ui/card";
+import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import type { Pagador } from "./types";
+
+interface PagadorCardProps {
+	pagador: Pagador;
+	onEdit?: () => void;
+	onRemove?: () => void;
+}
+
+export function PagadorCard({ pagador, onEdit, onRemove }: PagadorCardProps) {
+	const avatarSrc = getAvatarSrc(pagador.avatarUrl);
+	const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
+	const isReadOnly = !pagador.canEdit;
+
+	return (
+		<Card className=" overflow-hidden px-6">
+			{/* Avatar posicionado sobre o header */}
+			<div className="relative flex flex-col items-start">
+				<div className="relative mb-3 flex size-16 items-center justify-center overflow-hidden rounded-full  border-background bg-background shadow-lg">
+					<Image
+						src={avatarSrc}
+						alt={`Avatar de ${pagador.name}`}
+						width={80}
+						height={80}
+						className="h-full w-full object-cover"
+					/>
+				</div>
+
+				{/* Nome e badges */}
+				<div className="flex items-center gap-1.5">
+					<h3 className="text-base font-semibold text-foreground">
+						{pagador.name}
+					</h3>
+					{isAdmin ? (
+						<RiVerifiedBadgeFill className="size-4 text-blue-500" aria-hidden />
+					) : null}
+					{pagador.isAutoSend ? (
+						<RiMailSendLine className="size-4 text-primary" aria-hidden />
+					) : null}
+				</div>
+
+				{/* Email */}
+				{pagador.email ? (
+					<p className="mt-1 text-xs text-muted-foreground">{pagador.email}</p>
+				) : (
+					<p className="mt-1 text-xs text-muted-foreground">
+						Sem email cadastrado
+					</p>
+				)}
+
+				{/* Status badges */}
+				<div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
+					<Badge
+						variant={pagador.status === "Ativo" ? "success" : "outline"}
+						className="text-xs"
+					>
+						{pagador.status}
+					</Badge>
+
+					{isReadOnly ? (
+						<Badge variant="outline" className="text-xs text-warning">
+							Somente leitura
+						</Badge>
+					) : null}
+				</div>
+			</div>
+
+			{/* Footer com links */}
+			<div className="flex flex-wrap items-start justify-start gap-3 text-sm font-medium">
+				{!isReadOnly && onEdit ? (
+					<button
+						type="button"
+						onClick={onEdit}
+						className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+					>
+						<RiPencilLine className="size-4" aria-hidden />
+						editar
+					</button>
+				) : null}
+
+				<Link
+					href={`/payers/${pagador.id}`}
+					className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+				>
+					<RiFileList2Line className="size-4" aria-hidden />
+					detalhes
+				</Link>
+
+				{!isAdmin && !isReadOnly && onRemove ? (
+					<button
+						type="button"
+						onClick={onRemove}
+						className={`text-destructive flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+					>
+						<RiDeleteBin5Line className="size-4" aria-hidden />
+						remover
+					</button>
+				) : null}
+			</div>
+		</Card>
+	);
+}

src/features/payers/components/payer-dialog.tsx

@@ -0,0 +1,331 @@
+"use client";
+import Image from "next/image";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+import {
+	createPagadorAction,
+	updatePagadorAction,
+} from "@/features/payers/actions";
+import { Button } from "@/shared/components/ui/button";
+import { Checkbox } from "@/shared/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { Label } from "@/shared/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/shared/components/ui/select";
+import { useControlledState } from "@/shared/hooks/use-controlled-state";
+import { useFormState } from "@/shared/hooks/use-form-state";
+import {
+	DEFAULT_PAGADOR_AVATAR,
+	PAGADOR_STATUS_OPTIONS,
+	type PagadorStatus,
+} from "@/shared/lib/payers/constants";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import { StatusSelectContent } from "./payer-select-items";
+import type { Pagador, PagadorFormValues } from "./types";
+
+interface PagadorDialogProps {
+	mode: "create" | "update";
+	trigger?: React.ReactNode;
+	pagador?: Pagador;
+	avatarOptions: string[];
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}
+
+const buildInitialValues = ({
+	pagador,
+	avatarOptions,
+}: {
+	pagador?: Pagador;
+	avatarOptions: string[];
+}): PagadorFormValues => {
+	const defaultAvatar = avatarOptions[0] ?? DEFAULT_PAGADOR_AVATAR;
+
+	return {
+		name: pagador?.name ?? "",
+		email: pagador?.email ?? "",
+		status: (pagador?.status as PagadorStatus) ?? PAGADOR_STATUS_OPTIONS[0],
+		avatarUrl: pagador?.avatarUrl ?? defaultAvatar,
+		note: pagador?.note ?? "",
+		isAutoSend: pagador?.isAutoSend ?? false,
+	};
+};
+
+export function PagadorDialog({
+	mode,
+	trigger,
+	pagador,
+	avatarOptions,
+	open,
+	onOpenChange,
+}: PagadorDialogProps) {
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const [isPending, startTransition] = useTransition();
+
+	// Use controlled state hook for dialog open state
+	const [dialogOpen, setDialogOpen] = useControlledState(
+		open,
+		false,
+		onOpenChange,
+	);
+
+	const initialState = useMemo(
+		() => buildInitialValues({ pagador, avatarOptions }),
+		[pagador, avatarOptions],
+	);
+
+	// Use form state hook for form management
+	const { formState, resetForm, updateField } =
+		useFormState<PagadorFormValues>(initialState);
+
+	const availableAvatars = useMemo(() => {
+		const set = new Set<string>();
+		avatarOptions.forEach((avatar) => set.add(avatar));
+		set.add(initialState.avatarUrl);
+		set.add(DEFAULT_PAGADOR_AVATAR);
+		return Array.from(set).sort((a, b) =>
+			a.localeCompare(b, "pt-BR", { sensitivity: "base" }),
+		);
+	}, [avatarOptions, initialState.avatarUrl]);
+
+	// Reset form when dialog opens
+	useEffect(() => {
+		if (dialogOpen) {
+			resetForm(initialState);
+			setErrorMessage(null);
+		}
+	}, [dialogOpen, initialState, resetForm]);
+
+	type PagadorCreatePayload = Parameters<typeof createPagadorAction>[0];
+
+	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setErrorMessage(null);
+		const pagadorId = pagador?.id;
+
+		if (mode === "update" && !pagadorId) {
+			const message = "Pagador inválido.";
+			setErrorMessage(message);
+			toast.error(message);
+			return;
+		}
+
+		const emailValue = formState.email.trim();
+		const payload: PagadorCreatePayload = {
+			name: formState.name.trim(),
+			status: formState.status,
+			avatarUrl: formState.avatarUrl,
+			email: emailValue || null,
+			note: formState.note.trim() || null,
+			isAutoSend: formState.isAutoSend,
+		};
+
+		startTransition(async () => {
+			if (mode === "create") {
+				const result = await createPagadorAction(payload);
+
+				if (result.success) {
+					toast.success(result.message);
+					setDialogOpen(false);
+					resetForm(initialState);
+					return;
+				}
+
+				setErrorMessage(result.error);
+				toast.error(result.error);
+				return;
+			}
+
+			if (!pagadorId) {
+				return;
+			}
+
+			const result = await updatePagadorAction({
+				id: pagadorId,
+				...payload,
+			});
+
+			if (result.success) {
+				toast.success(result.message);
+				setDialogOpen(false);
+				resetForm(initialState);
+				return;
+			}
+
+			setErrorMessage(result.error);
+			toast.error(result.error);
+		});
+	};
+
+	const title = mode === "create" ? "Novo pagador" : "Editar pagador";
+	const description =
+		mode === "create"
+			? "Selecione um avatar e informe os detalhes para criar um novo pagador."
+			: "Atualize os detalhes do pagador selecionado.";
+	const submitLabel =
+		mode === "create" ? "Salvar pagador" : "Atualizar pagador";
+
+	return (
+		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+			{trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+			<DialogContent className="max-w-2xl px-6 py-5 sm:px-8 sm:py-6">
+				<DialogHeader>
+					<DialogTitle>{title}</DialogTitle>
+					<DialogDescription>{description}</DialogDescription>
+				</DialogHeader>
+
+				<form className="flex flex-col gap-6" onSubmit={handleSubmit}>
+					<fieldset className="flex flex-col gap-3">
+						<div className="flex flex-col gap-3">
+							<div className="flex w-full gap-2">
+								<div className="flex flex-col gap-2 w-full">
+									<Label htmlFor="pagador-name">Nome</Label>
+									<Input
+										id="pagador-name"
+										value={formState.name}
+										onChange={(event) =>
+											updateField("name", event.target.value)
+										}
+										placeholder="Ex.: Felipe Coutinho"
+										required
+									/>
+								</div>
+
+								<div className="flex flex-col gap-2 w-full">
+									<Label htmlFor="pagador-email">E-mail</Label>
+									<Input
+										id="pagador-email"
+										type="email"
+										value={formState.email}
+										onChange={(event) =>
+											updateField("email", event.target.value)
+										}
+										placeholder="Ex.: felipe@email.com"
+									/>
+								</div>
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label htmlFor="pagador-status">Status</Label>
+								<Select
+									value={formState.status}
+									onValueChange={(value: PagadorStatus) =>
+										updateField("status", value)
+									}
+								>
+									<SelectTrigger id="pagador-status" className="w-full">
+										<SelectValue placeholder="Selecione o status">
+											{formState.status && (
+												<StatusSelectContent label={formState.status} />
+											)}
+										</SelectValue>
+									</SelectTrigger>
+									<SelectContent>
+										{PAGADOR_STATUS_OPTIONS.map((status) => (
+											<SelectItem key={status} value={status}>
+												<StatusSelectContent label={status} />
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+
+							<fieldset className="flex flex-col gap-3">
+								<div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/10 p-3">
+									<Checkbox
+										id="pagador-auto-send"
+										checked={formState.isAutoSend}
+										onCheckedChange={(checked) =>
+											updateField("isAutoSend", Boolean(checked))
+										}
+										aria-label="Ativar envio automático"
+									/>
+									<div className="space-y-1">
+										<Label
+											htmlFor="pagador-auto-send"
+											className="text-sm font-medium text-foreground"
+										>
+											Enviar automaticamente
+										</Label>
+										<p className="text-xs text-muted-foreground">
+											Dispare cobranças e lembretes sem intervenção manual.
+										</p>
+									</div>
+								</div>
+							</fieldset>
+
+							<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 (
+											<button
+												type="button"
+												key={avatar}
+												onClick={() => updateField("avatarUrl", avatar)}
+												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}
+											>
+												<Image
+													src={getAvatarSrc(avatar)}
+													alt={`Avatar ${avatar}`}
+													width={40}
+													height={40}
+													className="size-12 rounded-full object-cove hover:scale-110 transition-transform duration-200"
+												/>
+											</button>
+										);
+									})}
+								</div>
+							</fieldset>
+
+							<div className="flex flex-col gap-2">
+								<Label htmlFor="pagador-note">Anotações</Label>
+								<Input
+									id="pagador-note"
+									value={formState.note}
+									onChange={(event) => updateField("note", event.target.value)}
+									placeholder="Observações sobre este pagador"
+								/>
+							</div>
+						</div>
+					</fieldset>
+
+					{errorMessage ? (
+						<p className="text-sm text-destructive">{errorMessage}</p>
+					) : null}
+
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => setDialogOpen(false)}
+							disabled={isPending}
+						>
+							Cancelar
+						</Button>
+						<Button type="submit" disabled={isPending}>
+							{isPending ? "Salvando..." : submitLabel}
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/features/payers/components/payer-select-items.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import StatusDot from "@/shared/components/status-dot";
+
+export function StatusSelectContent({ label }: { label: string }) {
+	const isActive = label === "Ativo";
+
+	return (
+		<span className="flex items-center gap-2">
+			<StatusDot
+				color={isActive ? "bg-success" : "bg-slate-400 dark:bg-slate-500"}
+			/>
+			<span>{label}</span>
+		</span>
+	);
+}

src/features/payers/components/payers-page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { RiAddCircleLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+import {
+	deletePagadorAction,
+	joinPagadorByShareCodeAction,
+} from "@/features/payers/actions";
+import { PagadorCard } from "@/features/payers/components/payer-card";
+import { PagadorDialog } from "@/features/payers/components/payer-dialog";
+import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
+import type { Pagador } from "./types";
+
+interface PagadoresPageProps {
+	pagadores: Pagador[];
+	avatarOptions: string[];
+}
+
+export function PagadoresPage({
+	pagadores,
+	avatarOptions,
+}: PagadoresPageProps) {
+	const router = useRouter();
+	const [editOpen, setEditOpen] = useState(false);
+	const [selectedPagador, setSelectedPagador] = useState<Pagador | null>(null);
+	const [removeOpen, setRemoveOpen] = useState(false);
+	const [pagadorToRemove, setPagadorToRemove] = useState<Pagador | null>(null);
+	const [shareCodeInput, setShareCodeInput] = useState("");
+	const [joinPending, startJoin] = useTransition();
+
+	const orderedPagadores = useMemo(
+		() =>
+			[...pagadores].sort((a, b) => {
+				// Admin sempre primeiro
+				if (a.role === PAGADOR_ROLE_ADMIN && b.role !== PAGADOR_ROLE_ADMIN) {
+					return -1;
+				}
+				if (a.role !== PAGADOR_ROLE_ADMIN && b.role === PAGADOR_ROLE_ADMIN) {
+					return 1;
+				}
+				// Se ambos têm o mesmo tipo de role, ordena por nome
+				return a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" });
+			}),
+		[pagadores],
+	);
+
+	const handleEdit = (pagador: Pagador) => {
+		setSelectedPagador(pagador);
+		setEditOpen(true);
+	};
+
+	const handleEditOpenChange = (open: boolean) => {
+		setEditOpen(open);
+		if (!open) {
+			setSelectedPagador(null);
+		}
+	};
+
+	const handleRemoveRequest = (pagador: Pagador) => {
+		if (pagador.role === PAGADOR_ROLE_ADMIN) {
+			toast.error("Pagadores administradores não podem ser removidos.");
+			return;
+		}
+		setPagadorToRemove(pagador);
+		setRemoveOpen(true);
+	};
+
+	const handleRemoveOpenChange = (open: boolean) => {
+		setRemoveOpen(open);
+		if (!open) {
+			setPagadorToRemove(null);
+		}
+	};
+
+	const handleRemoveConfirm = async () => {
+		if (!pagadorToRemove) {
+			return;
+		}
+
+		const result = await deletePagadorAction({ id: pagadorToRemove.id });
+
+		if (result.success) {
+			toast.success(result.message);
+			return;
+		}
+
+		toast.error(result.error);
+		throw new Error(result.error);
+	};
+
+	const removeTitle = pagadorToRemove
+		? `Remover pagador "${pagadorToRemove.name}"?`
+		: "Remover pagador?";
+
+	const handleJoinByCode = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (!shareCodeInput.trim()) {
+			toast.error("Informe um código válido.");
+			return;
+		}
+
+		startJoin(async () => {
+			const result = await joinPagadorByShareCodeAction({
+				code: shareCodeInput.trim(),
+			});
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success(result.message);
+			setShareCodeInput("");
+			router.refresh();
+		});
+	};
+
+	return (
+		<>
+			<div className="flex flex-col gap-6 w-full">
+				<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+					<PagadorDialog
+						mode="create"
+						avatarOptions={avatarOptions}
+						trigger={
+							<Button className="w-full sm:w-auto">
+								<RiAddCircleLine className="size-4" />
+								Novo pagador
+							</Button>
+						}
+					/>
+					<form
+						onSubmit={handleJoinByCode}
+						className="flex w-full flex-row items-center justify-center gap-2 sm:w-auto"
+					>
+						<Input
+							placeholder="Código de Compartilhamento"
+							value={shareCodeInput}
+							onChange={(event) => setShareCodeInput(event.target.value)}
+							disabled={joinPending}
+							className="w-full sm:w-56 border-dashed"
+						/>
+						<Button type="submit" disabled={joinPending}>
+							{joinPending ? "Adicionando..." : "Adicionar por código"}
+						</Button>
+					</form>
+				</div>
+
+				{orderedPagadores.length === 0 ? (
+					<div className="flex min-h-[320px] items-center justify-center rounded-lg border border-dashed bg-muted/30">
+						<div className="max-w-sm text-center text-sm text-muted-foreground">
+							Cadastre seu primeiro pagador para organizar cobranças e
+							pagamentos recorrentes.
+						</div>
+					</div>
+				) : (
+					<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+						{orderedPagadores.map((pagador) => (
+							<PagadorCard
+								key={pagador.id}
+								pagador={pagador}
+								onEdit={pagador.canEdit ? () => handleEdit(pagador) : undefined}
+								onRemove={
+									pagador.canEdit && pagador.role !== PAGADOR_ROLE_ADMIN
+										? () => handleRemoveRequest(pagador)
+										: undefined
+								}
+							/>
+						))}
+					</div>
+				)}
+			</div>
+
+			<PagadorDialog
+				mode="update"
+				pagador={selectedPagador ?? undefined}
+				avatarOptions={avatarOptions}
+				open={editOpen && !!selectedPagador}
+				onOpenChange={handleEditOpenChange}
+			/>
+
+			<ConfirmActionDialog
+				open={removeOpen && !!pagadorToRemove}
+				onOpenChange={handleRemoveOpenChange}
+				title={removeTitle}
+				description="Ao remover este pagador, os registros relacionados a ele deixarão de ser associados automaticamente."
+				confirmLabel="Remover pagador"
+				pendingLabel="Removendo..."
+				confirmVariant="destructive"
+				onConfirm={handleRemoveConfirm}
+			/>
+		</>
+	);
+}

src/features/payers/components/types.ts

@@ -0,0 +1,27 @@
+import type { PagadorStatus } from "@/shared/lib/payers/constants";
+
+export type Pagador = {
+	id: string;
+	name: string;
+	email: string | null;
+	avatarUrl: string | null;
+	status: PagadorStatus;
+	note: string | null;
+	role: string | null;
+	isAutoSend: boolean;
+	createdAt: string;
+	canEdit: boolean;
+	sharedByName?: string | null;
+	sharedByEmail?: string | null;
+	shareId?: string | null;
+	shareCode?: string | null;
+};
+
+export type PagadorFormValues = {
+	name: string;
+	email: string;
+	status: PagadorStatus;
+	avatarUrl: string;
+	note: string;
+	isAutoSend: boolean;
+};