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;
+};