refactor(dashboard): reorganiza widgets e remove magnet-lines

components/dashboard/bill-widget.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { DashboardBill } from "@/lib/dashboard/bills";
+import { useBillWidgetController } from "@/lib/dashboard/use-bill-widget-controller";
+import { BillsWidgetView } from "./bills/bills-widget-view";
+
+type BillWidgetProps = {
+	bills?: DashboardBill[];
+};
+
+export function BillWidget({ bills }: BillWidgetProps) {
+	const {
+		items,
+		selectedBill,
+		isModalOpen,
+		modalState,
+		isPending,
+		openPaymentDialog,
+		closePaymentDialog,
+		confirmPayment,
+	} = useBillWidgetController(bills);
+
+	return (
+		<BillsWidgetView
+			bills={items}
+			selectedBill={selectedBill}
+			isModalOpen={isModalOpen}
+			modalState={modalState}
+			isPending={isPending}
+			onOpenPaymentDialog={openPaymentDialog}
+			onClosePaymentDialog={closePaymentDialog}
+			onConfirmPayment={confirmPayment}
+		/>
+	);
+}

components/dashboard/bills/bill-list-item.tsx

@@ -0,0 +1,73 @@
+import { RiCheckboxCircleFill } from "@remixicon/react";
+import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
+import MoneyValues from "@/components/shared/money-values";
+import { Button } from "@/components/ui/button";
+import type { DashboardBill } from "@/lib/dashboard/bills";
+import {
+	buildBillStatusLabel,
+	isBillOverdue,
+} from "@/lib/dashboard/bills-helpers";
+import { cn } from "@/lib/utils/ui";
+
+type BillListItemProps = {
+	bill: DashboardBill;
+	onPay: (billId: string) => void;
+};
+
+export function BillListItem({ bill, onPay }: BillListItemProps) {
+	const statusLabel = buildBillStatusLabel(bill);
+	const overdue = isBillOverdue(bill);
+
+	return (
+		<li 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">
+				<EstabelecimentoLogo name={bill.name} size={37} />
+
+				<div className="min-w-0">
+					<span className="block truncate text-sm font-medium text-foreground">
+						{bill.name}
+					</span>
+					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+						{statusLabel ? (
+							<span
+								className={cn(
+									"rounded-full py-0.5",
+									bill.isSettled && "text-success",
+								)}
+							>
+								{statusLabel}
+							</span>
+						) : null}
+					</div>
+				</div>
+			</div>
+
+			<div className="flex shrink-0 flex-col items-end">
+				<MoneyValues amount={bill.amount} />
+				<Button
+					type="button"
+					size="sm"
+					variant="link"
+					className="h-auto p-0 disabled:opacity-100"
+					disabled={bill.isSettled}
+					onClick={() => onPay(bill.id)}
+				>
+					{bill.isSettled ? (
+						<span className="flex items-center gap-1 text-success">
+							<RiCheckboxCircleFill className="size-3" /> Pago
+						</span>
+					) : overdue ? (
+						<span className="overdue-blink">
+							<span className="overdue-blink-primary text-destructive">
+								Atrasado
+							</span>
+							<span className="overdue-blink-secondary">Pagar</span>
+						</span>
+					) : (
+						"Pagar"
+					)}
+				</Button>
+			</div>
+		</li>
+	);
+}

components/dashboard/bills/bill-payment-dialog.tsx

@@ -0,0 +1,189 @@
+import {
+	RiBarcodeFill,
+	RiCheckboxCircleLine,
+	RiLoader4Line,
+	RiMoneyDollarCircleLine,
+} from "@remixicon/react";
+import MoneyValues from "@/components/shared/money-values";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import type { DashboardBill } from "@/lib/dashboard/bills";
+import {
+	type BillDialogState,
+	formatBillDateLabel,
+	getBillStatusBadgeVariant,
+} from "@/lib/dashboard/bills-helpers";
+
+type BillPaymentDialogProps = {
+	bill: DashboardBill | null;
+	open: boolean;
+	modalState: BillDialogState;
+	isPending: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
+
+export function BillPaymentDialog({
+	bill,
+	open,
+	modalState,
+	isPending,
+	onClose,
+	onConfirm,
+}: BillPaymentDialogProps) {
+	const isProcessing = modalState === "processing" || isPending;
+	const dueLabel = bill
+		? formatBillDateLabel(bill.dueDate, "Vencimento:")
+		: null;
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(nextOpen) => {
+				if (nextOpen || isProcessing) {
+					return;
+				}
+				onClose();
+			}}
+		>
+			<DialogContent
+				className="max-w-[calc(100%-2rem)] sm:max-w-md"
+				onEscapeKeyDown={(event) => {
+					if (isProcessing) {
+						event.preventDefault();
+					}
+				}}
+				onPointerDownOutside={(event) => {
+					if (isProcessing) {
+						event.preventDefault();
+					}
+				}}
+			>
+				{modalState === "success" ? (
+					<div className="flex flex-col items-center gap-4 py-6 text-center">
+						<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
+							<RiCheckboxCircleLine className="size-8" />
+						</div>
+						<div className="space-y-2">
+							<DialogTitle className="text-base">
+								Pagamento registrado!
+							</DialogTitle>
+							<DialogDescription className="text-sm">
+								Atualizamos o status do boleto para pago. Em instantes ele
+								aparecerá como baixado no histórico.
+							</DialogDescription>
+						</div>
+						<DialogFooter className="sm:justify-center">
+							<Button type="button" onClick={onClose} className="sm:w-auto">
+								Fechar
+							</Button>
+						</DialogFooter>
+					</div>
+				) : (
+					<>
+						<DialogHeader>
+							<DialogTitle>Confirmar pagamento do boleto</DialogTitle>
+							<DialogDescription>
+								Confirme os dados para registrar o pagamento. Você poderá editar
+								o lançamento depois, se necessário.
+							</DialogDescription>
+						</DialogHeader>
+
+						{bill ? (
+							<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">
+												<RiBarcodeFill className="size-5 text-primary" />
+											</div>
+											<div>
+												<p className="text-sm font-medium text-muted-foreground">
+													Boleto
+												</p>
+												<p className="text-lg font-bold text-foreground">
+													{bill.name}
+												</p>
+											</div>
+										</div>
+										{dueLabel ? (
+											<div className="text-right">
+												<p className="text-sm text-muted-foreground">
+													{dueLabel}
+												</p>
+											</div>
+										) : null}
+									</div>
+								</div>
+
+								<div className="grid gap-3 sm:grid-cols-2">
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+											<RiMoneyDollarCircleLine className="size-4" />
+											<span className="text-xs font-semibold uppercase">
+												Valor do Boleto
+											</span>
+										</div>
+										<MoneyValues
+											amount={bill.amount}
+											className="text-lg font-bold"
+										/>
+									</div>
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+											<RiCheckboxCircleLine className="size-4" />
+											<span className="text-xs font-semibold uppercase">
+												Status
+											</span>
+										</div>
+										<Badge
+											variant={getBillStatusBadgeVariant(
+												bill.isSettled ? "Pago" : "Pendente",
+											)}
+										>
+											{bill.isSettled ? "Pago" : "Pendente"}
+										</Badge>
+									</div>
+								</div>
+							</div>
+						) : null}
+
+						<DialogFooter className="sm:justify-end">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={onClose}
+								disabled={isProcessing}
+							>
+								Cancelar
+							</Button>
+							<Button
+								type="button"
+								onClick={onConfirm}
+								disabled={isProcessing || !bill || bill.isSettled}
+								className="relative"
+							>
+								{isProcessing ? (
+									<>
+										<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
+										Processando...
+									</>
+								) : (
+									"Confirmar pagamento"
+								)}
+							</Button>
+						</DialogFooter>
+					</>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+}

components/dashboard/bills/bills-list.tsx

@@ -0,0 +1,29 @@
+import { RiBarcodeFill } from "@remixicon/react";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { DashboardBill } from "@/lib/dashboard/bills";
+import { BillListItem } from "./bill-list-item";
+
+type BillsListProps = {
+	bills: DashboardBill[];
+	onPay: (billId: string) => void;
+};
+
+export function BillsList({ bills, onPay }: BillsListProps) {
+	if (bills.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiBarcodeFill className="size-6 text-muted-foreground" />}
+				title="Nenhum boleto cadastrado para o período selecionado"
+				description="Cadastre boletos para monitorar os pagamentos aqui."
+			/>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col">
+			{bills.map((bill) => (
+				<BillListItem key={bill.id} bill={bill} onPay={onPay} />
+			))}
+		</ul>
+	);
+}

components/dashboard/bills/bills-widget-view.tsx

@@ -0,0 +1,43 @@
+import type { DashboardBill } from "@/lib/dashboard/bills";
+import type { BillDialogState } from "@/lib/dashboard/bills-helpers";
+import { BillPaymentDialog } from "./bill-payment-dialog";
+import { BillsList } from "./bills-list";
+
+type BillsWidgetViewProps = {
+	bills: DashboardBill[];
+	selectedBill: DashboardBill | null;
+	isModalOpen: boolean;
+	modalState: BillDialogState;
+	isPending: boolean;
+	onOpenPaymentDialog: (billId: string) => void;
+	onClosePaymentDialog: () => void;
+	onConfirmPayment: () => void;
+};
+
+export function BillsWidgetView({
+	bills,
+	selectedBill,
+	isModalOpen,
+	modalState,
+	isPending,
+	onOpenPaymentDialog,
+	onClosePaymentDialog,
+	onConfirmPayment,
+}: BillsWidgetViewProps) {
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<BillsList bills={bills} onPay={onOpenPaymentDialog} />
+			</div>
+
+			<BillPaymentDialog
+				bill={selectedBill}
+				open={isModalOpen}
+				modalState={modalState}
+				isPending={isPending}
+				onClose={onClosePaymentDialog}
+				onConfirm={onConfirmPayment}
+			/>
+		</>
+	);
+}

components/dashboard/boletos-widget.tsx

@@ -1,388 +0,0 @@
-"use client";
-
-import {
-	RiBarcodeFill,
-	RiCheckboxCircleFill,
-	RiCheckboxCircleLine,
-	RiLoader4Line,
-	RiMoneyDollarCircleLine,
-} from "@remixicon/react";
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState, useTransition } from "react";
-import { toast } from "sonner";
-import { toggleLancamentoSettlementAction } from "@/app/(dashboard)/lancamentos/actions";
-import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
-import MoneyValues from "@/components/money-values";
-import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogFooter as ModalFooter,
-} from "@/components/ui/dialog";
-import type { DashboardBoleto } from "@/lib/dashboard/boletos";
-import { cn } from "@/lib/utils/ui";
-import { Badge } from "../ui/badge";
-import { WidgetEmptyState } from "../widget-empty-state";
-
-type BoletosWidgetProps = {
-	boletos: DashboardBoleto[];
-};
-
-type ModalState = "idle" | "processing" | "success";
-
-const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-	timeZone: "UTC",
-});
-
-const buildDateLabel = (value: string | null, prefix?: string) => {
-	if (!value) {
-		return null;
-	}
-
-	const [year, month, day] = value.split("-").map((part) => Number(part));
-	if (!year || !month || !day) {
-		return null;
-	}
-
-	const formatted = DATE_FORMATTER.format(
-		new Date(Date.UTC(year, month - 1, day)),
-	);
-
-	return prefix ? `${prefix} ${formatted}` : formatted;
-};
-
-const buildStatusLabel = (boleto: DashboardBoleto) => {
-	if (boleto.isSettled) {
-		return buildDateLabel(boleto.boletoPaymentDate, "Pago em");
-	}
-
-	return buildDateLabel(boleto.dueDate, "Vence em");
-};
-
-const getTodayDateString = () => {
-	const now = new Date();
-	const year = now.getFullYear();
-	const month = String(now.getMonth() + 1).padStart(2, "0");
-	const day = String(now.getDate()).padStart(2, "0");
-	return `${year}-${month}-${day}`;
-};
-
-export function BoletosWidget({ boletos }: BoletosWidgetProps) {
-	const router = useRouter();
-	const [items, setItems] = useState(boletos);
-	const [selectedId, setSelectedId] = useState<string | null>(null);
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [modalState, setModalState] = useState<ModalState>("idle");
-	const [isPending, startTransition] = useTransition();
-
-	useEffect(() => {
-		setItems(boletos);
-	}, [boletos]);
-
-	const selectedBoleto = useMemo(
-		() => items.find((boleto) => boleto.id === selectedId) ?? null,
-		[items, selectedId],
-	);
-
-	const isProcessing = modalState === "processing" || isPending;
-
-	const selectedBoletoDueLabel = selectedBoleto
-		? buildDateLabel(selectedBoleto.dueDate, "Vencimento:")
-		: null;
-
-	const handleOpenModal = (boletoId: string) => {
-		setSelectedId(boletoId);
-		setModalState("idle");
-		setIsModalOpen(true);
-	};
-
-	const resetModalState = () => {
-		setIsModalOpen(false);
-		setSelectedId(null);
-		setModalState("idle");
-	};
-
-	const handleConfirmPayment = () => {
-		if (!selectedBoleto || selectedBoleto.isSettled || isProcessing) {
-			return;
-		}
-
-		setModalState("processing");
-
-		startTransition(async () => {
-			const result = await toggleLancamentoSettlementAction({
-				id: selectedBoleto.id,
-				value: true,
-			});
-
-			if (!result.success) {
-				toast.error(result.error);
-				setModalState("idle");
-				return;
-			}
-
-			setItems((previous) =>
-				previous.map((boleto) =>
-					boleto.id === selectedBoleto.id
-						? {
-								...boleto,
-								isSettled: true,
-								boletoPaymentDate: getTodayDateString(),
-							}
-						: boleto,
-				),
-			);
-			toast.success(result.message);
-			router.refresh();
-			setModalState("success");
-		});
-	};
-
-	const getStatusBadgeVariant = (status: string): "success" | "info" => {
-		const normalizedStatus = status.toLowerCase();
-		if (normalizedStatus === "pendente") {
-			return "info";
-		}
-		return "success";
-	};
-
-	return (
-		<>
-			<CardContent className="flex flex-col gap-4 px-0">
-				{items.length === 0 ? (
-					<WidgetEmptyState
-						icon={<RiBarcodeFill className="size-6 text-muted-foreground" />}
-						title="Nenhum boleto cadastrado para o período selecionado"
-						description="Cadastre boletos para monitorar os pagamentos aqui."
-					/>
-				) : (
-					<ul className="flex flex-col">
-						{items.map((boleto) => {
-							const statusLabel = buildStatusLabel(boleto);
-							const isOverdue = (() => {
-								if (boleto.isSettled || !boleto.dueDate) return false;
-								const [y, m, d] = boleto.dueDate.split("-").map(Number);
-								if (!y || !m || !d) return false;
-								return new Date(Date.UTC(y, m - 1, d)) < new Date();
-							})();
-
-							return (
-								<li
-									key={boleto.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={boleto.name} size={37} />
-
-										<div className="min-w-0">
-											<span className="block truncate text-sm font-medium text-foreground">
-												{boleto.name}
-											</span>
-											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-												<span
-													className={cn(
-														"rounded-full py-0.5",
-														boleto.isSettled && "text-success",
-													)}
-												>
-													{statusLabel}
-												</span>
-											</div>
-										</div>
-									</div>
-
-									<div className="flex shrink-0 flex-col items-end">
-										<MoneyValues amount={boleto.amount} />
-										<Button
-											type="button"
-											size="sm"
-											variant="link"
-											className="h-auto p-0 disabled:opacity-100"
-											disabled={boleto.isSettled}
-											onClick={() => handleOpenModal(boleto.id)}
-										>
-											{boleto.isSettled ? (
-												<span className="flex items-center gap-1 text-success">
-													<RiCheckboxCircleFill className="size-3" /> Pago
-												</span>
-											) : isOverdue ? (
-												<span className="overdue-blink">
-													<span className="overdue-blink-primary text-destructive">
-														Atrasado
-													</span>
-													<span className="overdue-blink-secondary">Pagar</span>
-												</span>
-											) : (
-												"Pagar"
-											)}
-										</Button>
-									</div>
-								</li>
-							);
-						})}
-					</ul>
-				)}
-			</CardContent>
-
-			<Dialog
-				open={isModalOpen}
-				onOpenChange={(open) => {
-					if (!open) {
-						if (isProcessing) {
-							return;
-						}
-						resetModalState();
-						return;
-					}
-					setIsModalOpen(true);
-				}}
-			>
-				<DialogContent
-					className="max-w-[calc(100%-2rem)] sm:max-w-md"
-					onEscapeKeyDown={(event) => {
-						if (isProcessing) {
-							event.preventDefault();
-							return;
-						}
-						resetModalState();
-					}}
-					onPointerDownOutside={(event) => {
-						if (isProcessing) {
-							event.preventDefault();
-						}
-					}}
-				>
-					{modalState === "success" ? (
-						<div className="flex flex-col items-center gap-4 py-6 text-center">
-							<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
-								<RiCheckboxCircleLine className="size-8" />
-							</div>
-							<div className="space-y-2">
-								<DialogTitle className="text-base">
-									Pagamento registrado!
-								</DialogTitle>
-								<DialogDescription className="text-sm">
-									Atualizamos o status do boleto para pago. Em instantes ele
-									aparecerá como baixado no histórico.
-								</DialogDescription>
-							</div>
-							<ModalFooter className="sm:justify-center">
-								<Button
-									type="button"
-									onClick={resetModalState}
-									className="sm:w-auto"
-								>
-									Fechar
-								</Button>
-							</ModalFooter>
-						</div>
-					) : (
-						<>
-							<DialogHeader>
-								<DialogTitle>Confirmar pagamento do boleto</DialogTitle>
-								<DialogDescription>
-									Confirme os dados para registrar o pagamento. Você poderá
-									editar o lançamento depois, se necessário.
-								</DialogDescription>
-							</DialogHeader>
-
-							{selectedBoleto ? (
-								<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">
-													<RiBarcodeFill className="size-5 text-primary" />
-												</div>
-												<div>
-													<p className="text-sm font-medium text-muted-foreground">
-														Boleto
-													</p>
-													<p className="text-lg font-bold text-foreground">
-														{selectedBoleto.name}
-													</p>
-												</div>
-											</div>
-											{selectedBoletoDueLabel ? (
-												<div className="text-right">
-													<p className="text-sm text-muted-foreground">
-														{selectedBoletoDueLabel}
-													</p>
-												</div>
-											) : null}
-										</div>
-									</div>
-
-									<div className="grid gap-3 sm:grid-cols-2">
-										<div className="rounded-lg border p-3">
-											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												<RiMoneyDollarCircleLine className="size-4" />
-												<span className="text-xs font-semibold uppercase">
-													Valor do Boleto
-												</span>
-											</div>
-											<MoneyValues
-												amount={selectedBoleto.amount}
-												className="text-lg font-bold"
-											/>
-										</div>
-										<div className="rounded-lg border p-3">
-											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												<RiCheckboxCircleLine className="size-4" />
-												<span className="text-xs font-semibold uppercase">
-													Status
-												</span>
-											</div>
-											<Badge
-												variant={getStatusBadgeVariant(
-													selectedBoleto.isSettled ? "Pago" : "Pendente",
-												)}
-											>
-												{selectedBoleto.isSettled ? "Pago" : "Pendente"}
-											</Badge>
-										</div>
-									</div>
-								</div>
-							) : null}
-
-							<ModalFooter className="sm:justify-end">
-								<Button
-									type="button"
-									variant="outline"
-									onClick={resetModalState}
-									disabled={isProcessing}
-								>
-									Cancelar
-								</Button>
-								<Button
-									type="button"
-									onClick={handleConfirmPayment}
-									disabled={
-										isProcessing || !selectedBoleto || selectedBoleto.isSettled
-									}
-									className="relative"
-								>
-									{isProcessing ? (
-										<>
-											<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
-											Processando...
-										</>
-									) : (
-										"Confirmar pagamento"
-									)}
-								</Button>
-							</ModalFooter>
-						</>
-					)}
-				</DialogContent>
-			</Dialog>
-		</>
-	);
-}

components/dashboard/category-breakdown/category-breakdown-widget-view.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import {
+	RiArrowDownSFill,
+	RiArrowUpSFill,
+	RiExternalLinkLine,
+	RiListUnordered,
+	RiPieChart2Line,
+	RiPieChartLine,
+	RiWallet3Line,
+} from "@remixicon/react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { Pie, PieChart, Tooltip } from "recharts";
+import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
+import MoneyValues from "@/components/shared/money-values";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { DashboardCategoryBreakdownData } from "@/lib/dashboard/categories/category-breakdown";
+import { formatCurrency } from "@/lib/lancamentos/formatting-helpers";
+import { formatPercentage as formatPercentageValue } from "@/lib/utils/percentage";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+
+type CategoryBreakdownVariant = "income" | "expense";
+
+type CategoryBreakdownWidgetViewProps = {
+	data: DashboardCategoryBreakdownData;
+	period: string;
+	variant: CategoryBreakdownVariant;
+};
+
+const CATEGORY_BREAKDOWN_COLORS = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)",
+	"var(--chart-1)",
+	"var(--chart-2)",
+];
+
+const VARIANT_CONFIG = {
+	income: {
+		emptyTitle: "Nenhuma receita encontrada",
+		emptyDescription:
+			"Quando houver receitas registradas, elas aparecerão aqui.",
+		shareLabel: "receita total",
+		percentageDigits: 1,
+		changeClassName: {
+			increase: "text-success",
+			decrease: "text-destructive",
+		},
+		listItemClassName:
+			"flex flex-col gap-1.5 py-2 border-b border-dashed last:border-0",
+		includeBudgetAmount: true,
+	},
+	expense: {
+		emptyTitle: "Nenhuma despesa encontrada",
+		emptyDescription:
+			"Quando houver despesas registradas, elas aparecerão aqui.",
+		shareLabel: "despesa total",
+		percentageDigits: 0,
+		changeClassName: {
+			increase: "text-destructive",
+			decrease: "text-success",
+		},
+		listItemClassName:
+			"flex flex-col py-2 border-b border-dashed last:border-0",
+		includeBudgetAmount: false,
+	},
+} as const;
+
+const formatPercentage = (value: number, digits: number) =>
+	formatPercentageValue(value, {
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits,
+		absolute: true,
+	});
+
+export function CategoryBreakdownWidgetView({
+	data,
+	period,
+	variant,
+}: CategoryBreakdownWidgetViewProps) {
+	const [activeTab, setActiveTab] = useState<"list" | "chart">("list");
+	const periodParam = formatPeriodForUrl(period);
+	const config = VARIANT_CONFIG[variant];
+
+	const chartConfig = useMemo(() => {
+		const nextConfig: ChartConfig = {};
+
+		if (data.categories.length <= 7) {
+			data.categories.forEach((category, index) => {
+				nextConfig[category.categoryId] = {
+					label: category.categoryName,
+					color:
+						CATEGORY_BREAKDOWN_COLORS[index % CATEGORY_BREAKDOWN_COLORS.length],
+				};
+			});
+		} else {
+			const topCategories = data.categories.slice(0, 7);
+			topCategories.forEach((category, index) => {
+				nextConfig[category.categoryId] = {
+					label: category.categoryName,
+					color:
+						CATEGORY_BREAKDOWN_COLORS[index % CATEGORY_BREAKDOWN_COLORS.length],
+				};
+			});
+			nextConfig.outros = {
+				label: "Outros",
+				color: "var(--chart-6)",
+			};
+		}
+
+		return nextConfig;
+	}, [data.categories]);
+
+	const chartData = useMemo(() => {
+		if (data.categories.length <= 7) {
+			return data.categories.map((category) => ({
+				category: category.categoryId,
+				name: category.categoryName,
+				value: category.currentAmount,
+				percentage: category.percentageOfTotal,
+				fill: chartConfig[category.categoryId]?.color,
+			}));
+		}
+
+		const topCategories = data.categories.slice(0, 7);
+		const otherCategories = data.categories.slice(7);
+		const otherTotal = otherCategories.reduce(
+			(sum, category) => sum + category.currentAmount,
+			0,
+		);
+		const otherPercentage = otherCategories.reduce(
+			(sum, category) => sum + category.percentageOfTotal,
+			0,
+		);
+
+		const groupedData = topCategories.map((category) => ({
+			category: category.categoryId,
+			name: category.categoryName,
+			value: category.currentAmount,
+			percentage: category.percentageOfTotal,
+			fill: chartConfig[category.categoryId]?.color,
+		}));
+
+		if (otherCategories.length > 0) {
+			groupedData.push({
+				category: "outros",
+				name: "Outros",
+				value: otherTotal,
+				percentage: otherPercentage,
+				fill: chartConfig.outros?.color,
+			});
+		}
+
+		return groupedData;
+	}, [data.categories, chartConfig]);
+
+	if (data.categories.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
+				title={config.emptyTitle}
+				description={config.emptyDescription}
+			/>
+		);
+	}
+
+	return (
+		<Tabs
+			value={activeTab}
+			onValueChange={(value: string) => setActiveTab(value as "list" | "chart")}
+			className="w-full"
+		>
+			<div className="flex items-center justify-between">
+				<TabsList className="grid grid-cols-2">
+					<TabsTrigger value="list" className="text-xs">
+						<RiListUnordered className="mr-1 size-3.5" />
+						Lista
+					</TabsTrigger>
+					<TabsTrigger value="chart" className="text-xs">
+						<RiPieChart2Line className="mr-1 size-3.5" />
+						Gráfico
+					</TabsTrigger>
+				</TabsList>
+			</div>
+
+			<TabsContent value="list" className="mt-0">
+				<div className="flex flex-col px-0">
+					{data.categories.map((category, index) => {
+						const hasIncrease =
+							category.percentageChange !== null &&
+							category.percentageChange > 0;
+						const hasDecrease =
+							category.percentageChange !== null &&
+							category.percentageChange < 0;
+						const hasBudget = category.budgetAmount !== null;
+						const budgetExceeded =
+							hasBudget &&
+							category.budgetUsedPercentage !== null &&
+							category.budgetUsedPercentage > 100;
+						const exceededAmount =
+							budgetExceeded && category.budgetAmount
+								? category.currentAmount - category.budgetAmount
+								: 0;
+						const changeClassName = hasIncrease
+							? config.changeClassName.increase
+							: hasDecrease
+								? config.changeClassName.decrease
+								: "text-muted-foreground";
+
+						return (
+							<div
+								key={category.categoryId}
+								className={config.listItemClassName}
+							>
+								<div className="flex items-center justify-between gap-3">
+									<div className="flex min-w-0 flex-1 items-center gap-2">
+										<CategoryIconBadge
+											icon={category.categoryIcon}
+											name={category.categoryName}
+											colorIndex={index}
+										/>
+
+										<div className="min-w-0 flex-1">
+											<div className="flex items-center gap-2">
+												<Link
+													href={`/categorias/${category.categoryId}?periodo=${periodParam}`}
+													className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
+												>
+													<span className="truncate">
+														{category.categoryName}
+													</span>
+													<RiExternalLinkLine
+														className="size-3 shrink-0 text-muted-foreground"
+														aria-hidden
+													/>
+												</Link>
+											</div>
+											<div className="flex items-center gap-2 text-xs text-muted-foreground">
+												<span>
+													{formatPercentage(
+														category.percentageOfTotal,
+														config.percentageDigits,
+													)}{" "}
+													da {config.shareLabel}
+												</span>
+											</div>
+										</div>
+									</div>
+
+									<div className="flex shrink-0 flex-col items-end gap-0.5">
+										<MoneyValues
+											className="text-foreground"
+											amount={category.currentAmount}
+										/>
+										{category.percentageChange !== null ? (
+											<span
+												className={`flex items-center gap-0.5 text-xs ${changeClassName}`}
+											>
+												{hasIncrease ? (
+													<RiArrowUpSFill className="size-3" />
+												) : null}
+												{hasDecrease ? (
+													<RiArrowDownSFill className="size-3" />
+												) : null}
+												{formatPercentage(
+													category.percentageChange,
+													config.percentageDigits,
+												)}
+											</span>
+										) : null}
+									</div>
+								</div>
+
+								{hasBudget && category.budgetUsedPercentage !== null ? (
+									<div className="ml-11 flex items-center gap-1.5 text-xs">
+										<RiWallet3Line
+											className={`size-3 ${
+												budgetExceeded ? "text-destructive" : "text-info"
+											}`}
+										/>
+										<span
+											className={
+												budgetExceeded ? "text-destructive" : "text-info"
+											}
+										>
+											{budgetExceeded ? (
+												<>
+													{formatPercentage(
+														category.budgetUsedPercentage,
+														config.percentageDigits,
+													)}{" "}
+													do limite
+													{config.includeBudgetAmount &&
+													category.budgetAmount !== null
+														? ` ${formatCurrency(category.budgetAmount)}`
+														: ""}{" "}
+													- excedeu em {formatCurrency(exceededAmount)}
+												</>
+											) : (
+												<>
+													{formatPercentage(
+														category.budgetUsedPercentage,
+														config.percentageDigits,
+													)}{" "}
+													do limite
+													{config.includeBudgetAmount &&
+													category.budgetAmount !== null
+														? ` ${formatCurrency(category.budgetAmount)}`
+														: ""}
+												</>
+											)}
+										</span>
+									</div>
+								) : null}
+							</div>
+						);
+					})}
+				</div>
+			</TabsContent>
+
+			<TabsContent value="chart" className="mt-0">
+				<div className="flex items-center gap-4">
+					<ChartContainer config={chartConfig} className="h-[280px] flex-1">
+						<PieChart>
+							<Pie
+								data={chartData}
+								cx="50%"
+								cy="50%"
+								labelLine={false}
+								label={({ payload }) =>
+									formatPercentage(
+										(payload as { percentage?: number } | undefined)
+											?.percentage ?? 0,
+										config.percentageDigits,
+									)
+								}
+								outerRadius={75}
+								dataKey="value"
+								nameKey="category"
+							/>
+							<Tooltip
+								content={({ active, payload }) => {
+									if (!active || !payload?.length) {
+										return null;
+									}
+
+									const entry = payload[0]?.payload;
+									if (!entry) {
+										return null;
+									}
+
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														{entry.name}
+													</span>
+													<span className="font-bold text-foreground">
+														{formatCurrency(entry.value)}
+													</span>
+													<span className="text-xs text-muted-foreground">
+														{formatPercentage(
+															entry.percentage,
+															config.percentageDigits,
+														)}{" "}
+														do total
+													</span>
+												</div>
+											</div>
+										</div>
+									);
+								}}
+							/>
+						</PieChart>
+					</ChartContainer>
+
+					<div className="min-w-[140px] flex flex-col gap-2">
+						{chartData.map((entry, index) => (
+							<div key={`legend-${index}`} className="flex items-center gap-2">
+								<div
+									className="size-3 shrink-0 rounded-sm"
+									style={{ backgroundColor: entry.fill }}
+								/>
+								<span className="truncate text-xs text-muted-foreground">
+									{entry.name}
+								</span>
+							</div>
+						))}
+					</div>
+				</div>
+			</TabsContent>
+		</Tabs>
+	);
+}

components/dashboard/category-history-widget.tsx

@@ -6,6 +6,7 @@ import {
 } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -26,9 +27,9 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
-import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { CategoryHistoryData } from "@/lib/dashboard/categories/category-history";
 import { CATEGORY_COLORS } from "@/lib/utils/category-colors";
+import { formatCurrency, formatCurrencyCompact } from "@/lib/utils/currency";
 import { getIconComponent } from "@/lib/utils/icons";
 
 type CategoryHistoryWidgetProps = {
@@ -124,33 +125,6 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
 		return config;
 	}, [filteredCategories]);
 
-	const formatCurrency = (value: number) => {
-		return new Intl.NumberFormat("pt-BR", {
-			style: "currency",
-			currency: "BRL",
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
-		}).format(value);
-	};
-
-	const formatCurrencyCompact = (value: number) => {
-		if (value >= 1000) {
-			return new Intl.NumberFormat("pt-BR", {
-				style: "currency",
-				currency: "BRL",
-				minimumFractionDigits: 0,
-				maximumFractionDigits: 0,
-				notation: "compact",
-			}).format(value);
-		}
-		return new Intl.NumberFormat("pt-BR", {
-			style: "currency",
-			currency: "BRL",
-			minimumFractionDigits: 0,
-			maximumFractionDigits: 0,
-		}).format(value);
-	};
-
 	const handleAddCategory = (categoryId: string) => {
 		if (
 			categoryId &&
@@ -217,7 +191,9 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
 											style={{ borderColor: color }}
 										>
 											{IconComponent ? (
-												<IconComponent className="size-4" style={{ color }} />
+												<span style={{ color }}>
+													<IconComponent className="size-4" />
+												</span>
 											) : (
 												<div
 													className="size-3 rounded-sm"
@@ -383,7 +359,7 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
 								axisLine={false}
 								tickMargin={8}
 								className="text-xs"
-								tickFormatter={formatCurrencyCompact}
+								tickFormatter={(value) => formatCurrencyCompact(Number(value))}
 							/>
 							<ChartTooltip
 								content={({ active, payload }) => {

components/dashboard/dashboard-grid-editable.tsx

@@ -23,15 +23,15 @@ import {
 	RiEyeOffLine,
 	RiTodoLine,
 } from "@remixicon/react";
-import { useCallback, useMemo, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
 import { NoteDialog } from "@/components/anotacoes/note-dialog";
 import { SortableWidget } from "@/components/dashboard/sortable-widget";
 import { WidgetSettingsDialog } from "@/components/dashboard/widget-settings-dialog";
 import { LancamentoDialog } from "@/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog";
 import type { SelectOption } from "@/components/lancamentos/types";
+import { ExpandableWidgetCard } from "@/components/shared/expandable-widget-card";
 import { Button } from "@/components/ui/button";
-import WidgetCard from "@/components/widget-card";
 import type { DashboardData } from "@/lib/dashboard/fetch-dashboard-data";
 import {
 	resetWidgetPreferences,
@@ -58,6 +58,8 @@ type DashboardGridEditableProps = {
 	};
 };
 
+const DEFAULT_WIDGET_ORDER = widgetsConfig.map((widget) => widget.id);
+
 export function DashboardGridEditable({
 	data,
 	period,
@@ -68,9 +70,8 @@ export function DashboardGridEditable({
 	const [isPending, startTransition] = useTransition();
 
 	// Initialize widget order and hidden state
-	const defaultOrder = widgetsConfig.map((w) => w.id);
 	const [widgetOrder, setWidgetOrder] = useState<string[]>(
-		initialPreferences?.order ?? defaultOrder,
+		initialPreferences?.order ?? DEFAULT_WIDGET_ORDER,
 	);
 	const [hiddenWidgets, setHiddenWidgets] = useState<string[]>(
 		initialPreferences?.hidden ?? [],
@@ -118,7 +119,7 @@ export function DashboardGridEditable({
 		return ordered;
 	}, [widgetOrder, hiddenWidgets]);
 
-	const handleDragEnd = useCallback((event: DragEndEvent) => {
+	const handleDragEnd = (event: DragEndEvent) => {
 		const { active, over } = event;
 
 		if (over && active.id !== over.id) {
@@ -128,44 +129,41 @@ export function DashboardGridEditable({
 				return arrayMove(items, oldIndex, newIndex);
 			});
 		}
-	}, []);
+	};
 
-	const handleToggleWidget = useCallback(
-		(widgetId: string) => {
-			const newHidden = hiddenWidgets.includes(widgetId)
-				? hiddenWidgets.filter((id) => id !== widgetId)
-				: [...hiddenWidgets, widgetId];
+	const handleToggleWidget = (widgetId: string) => {
+		const newHidden = hiddenWidgets.includes(widgetId)
+			? hiddenWidgets.filter((id) => id !== widgetId)
+			: [...hiddenWidgets, widgetId];
 
-			setHiddenWidgets(newHidden);
+		setHiddenWidgets(newHidden);
 
-			// Salvar automaticamente ao toggle
-			startTransition(async () => {
-				await updateWidgetPreferences({
-					order: widgetOrder,
-					hidden: newHidden,
-				});
+		// Salvar automaticamente ao toggle
+		startTransition(async () => {
+			await updateWidgetPreferences({
+				order: widgetOrder,
+				hidden: newHidden,
 			});
-		},
-		[hiddenWidgets, widgetOrder],
-	);
+		});
+	};
 
-	const handleHideWidget = useCallback((widgetId: string) => {
+	const handleHideWidget = (widgetId: string) => {
 		setHiddenWidgets((prev) => [...prev, widgetId]);
-	}, []);
+	};
 
-	const handleStartEditing = useCallback(() => {
+	const handleStartEditing = () => {
 		setOriginalOrder(widgetOrder);
 		setOriginalHidden(hiddenWidgets);
 		setIsEditing(true);
-	}, [widgetOrder, hiddenWidgets]);
+	};
 
-	const handleCancelEditing = useCallback(() => {
+	const handleCancelEditing = () => {
 		setWidgetOrder(originalOrder);
 		setHiddenWidgets(originalHidden);
 		setIsEditing(false);
-	}, [originalOrder, originalHidden]);
+	};
 
-	const handleSave = useCallback(() => {
+	const handleSave = () => {
 		startTransition(async () => {
 			const result = await updateWidgetPreferences({
 				order: widgetOrder,
@@ -179,21 +177,21 @@ export function DashboardGridEditable({
 				toast.error(result.error ?? "Erro ao salvar");
 			}
 		});
-	}, [widgetOrder, hiddenWidgets]);
+	};
 
-	const handleReset = useCallback(() => {
+	const handleReset = () => {
 		startTransition(async () => {
 			const result = await resetWidgetPreferences();
 
 			if (result.success) {
-				setWidgetOrder(defaultOrder);
+				setWidgetOrder(DEFAULT_WIDGET_ORDER);
 				setHiddenWidgets([]);
 				toast.success("Preferências restauradas!");
 			} else {
 				toast.error(result.error ?? "Erro ao restaurar");
 			}
 		});
-	}, [defaultOrder]);
+	};
 
 	return (
 		<div className="space-y-4">
@@ -360,14 +358,14 @@ export function DashboardGridEditable({
 											</div>
 										</div>
 									)}
-									<WidgetCard
+									<ExpandableWidgetCard
 										title={widget.title}
 										subtitle={widget.subtitle}
 										icon={widget.icon}
 										action={widget.action}
 									>
 										{widget.component({ data, period })}
-									</WidgetCard>
+									</ExpandableWidgetCard>
 								</div>
 							</SortableWidget>
 						))}

components/dashboard/dashboard-metrics-cards.tsx

@@ -7,6 +7,7 @@ import {
 	RiIncreaseDecreaseLine,
 	RiSubtractLine,
 } from "@remixicon/react";
+import MoneyValues from "@/components/shared/money-values";
 import {
 	Card,
 	CardAction,
@@ -14,10 +15,10 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import type { DashboardCardMetrics } from "@/lib/dashboard/metrics";
-import MoneyValues from "../money-values";
+import type { DashboardCardMetrics } from "@/lib/dashboard/dashboard-metrics";
+import { formatPercentage } from "@/lib/utils/percentage";
 
-type SectionCardsProps = {
+type DashboardMetricsCardsProps = {
 	metrics: DashboardCardMetrics;
 };
 
@@ -70,7 +71,11 @@ const getPercentChange = (current: number, previous: number): string => {
 
 	const change = ((current - previous) / Math.abs(previous)) * 100;
 	return Number.isFinite(change) && Math.abs(change) < 1000000
-		? `${change > 0 ? "+" : ""}${change.toFixed(1)}%`
+		? formatPercentage(change, {
+				maximumFractionDigits: 1,
+				minimumFractionDigits: 1,
+				signDisplay: "always",
+			})
 		: "—";
 };
 
@@ -82,7 +87,7 @@ const getTrendColor = (trend: Trend, invertTrend: boolean): string => {
 		: "text-destructive border-destructive";
 };
 
-export function SectionCards({ metrics }: SectionCardsProps) {
+export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 	return (
 		<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
 			{CARDS.map(({ label, key, icon: Icon, invertTrend }) => {
@@ -94,8 +99,8 @@ export function SectionCards({ metrics }: SectionCardsProps) {
 				return (
 					<Card key={label} className="@container/card gap-2">
 						<CardHeader>
-							<CardTitle className="flex items-center gap-1">
-								<Icon className="size-4 text-primary" />
+							<CardTitle className="flex items-center gap-1 font-[aeonik]	tracking-tighter lowercase">
+								<Icon className="size-4" />
 								{label}
 							</CardTitle>
 							<MoneyValues className="text-2xl" amount={metric.current} />
@@ -108,9 +113,9 @@ export function SectionCards({ metrics }: SectionCardsProps) {
 						</CardHeader>
 						<CardFooter className="flex-col items-start gap-2 text-sm">
 							<div className="line-clamp-1 flex gap-2 text-xs">
-								Mês anterior
+								mês anterior
 							</div>
-							<div className="text-muted-foreground">
+							<div className="text-foreground">
 								<MoneyValues amount={metric.previous} />
 							</div>
 						</CardFooter>

components/dashboard/dashboard-welcome.tsx

@@ -1,79 +1,18 @@
-"use client";
+import { formatCurrentDate, getGreeting } from "./welcome-widget";
 
-import MagnetLines from "../magnet-lines";
-import { Card } from "../ui/card";
-
-type DashboardWelcomeProps = {
-	name?: string | null;
-	disableMagnetlines?: boolean;
-};
-
-const capitalizeFirstLetter = (value: string) =>
-	value.length > 0 ? value[0]?.toUpperCase() + value.slice(1) : value;
-
-const formatCurrentDate = (date = new Date()) => {
-	const formatted = new Intl.DateTimeFormat("pt-BR", {
-		weekday: "long",
-		day: "numeric",
-		month: "long",
-		year: "numeric",
-		hour12: false,
-		timeZone: "America/Sao_Paulo",
-	}).format(date);
-
-	return capitalizeFirstLetter(formatted);
-};
-
-const getGreeting = () => {
-	const now = new Date();
-
-	// Get hour in Brasilia timezone
-	const brasiliaHour = new Intl.DateTimeFormat("pt-BR", {
-		hour: "numeric",
-		hour12: false,
-		timeZone: "America/Sao_Paulo",
-	}).format(now);
-
-	const hour = parseInt(brasiliaHour, 10);
-
-	if (hour >= 5 && hour < 12) {
-		return "Bom dia";
-	} else if (hour >= 12 && hour < 18) {
-		return "Boa tarde";
-	} else {
-		return "Boa noite";
-	}
-};
-
-export function DashboardWelcome({
-	name,
-	disableMagnetlines = false,
-}: DashboardWelcomeProps) {
+export function DashboardWelcome({ name }: { name?: string | null }) {
 	const displayName = name && name.trim().length > 0 ? name : "Administrador";
 	const formattedDate = formatCurrentDate();
 	const greeting = getGreeting();
 
 	return (
-		<Card className="relative px-6 py-12 bg-welcome-banner overflow-hidden">
-			<div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
-				<MagnetLines
-					rows={8}
-					columns={16}
-					containerSize="100%"
-					lineColor="currentColor"
-					lineWidth="0.4vmin"
-					lineHeight="5vmin"
-					baseAngle={0}
-					className="text-welcome-banner-foreground"
-					disabled={disableMagnetlines}
-				/>
-			</div>
-			<div className="relative tracking-tight text-welcome-banner-foreground">
-				<h1 className="text-xl">
-					{greeting}, {displayName}! <span aria-hidden="true">👋</span>
+		<section className="p-2">
+			<div className="tracking-tight">
+				<h1 className="text-xl font-[aeonik]">
+					{greeting}, {displayName}
 				</h1>
-				<p className="mt-2 text-sm opacity-90">{formattedDate}</p>
+				<p className="text-sm mt-1">{formattedDate}</p>
 			</div>
-		</Card>
+		</section>
 	);
 }

components/dashboard/expenses-by-category-widget-with-chart.tsx

@@ -1,328 +1,22 @@
 "use client";
 
-import {
-	RiArrowDownSFill,
-	RiArrowUpSFill,
-	RiExternalLinkLine,
-	RiListUnordered,
-	RiPieChart2Line,
-	RiPieChartLine,
-	RiWallet3Line,
-} from "@remixicon/react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { Pie, PieChart, Tooltip } from "recharts";
-import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
-import MoneyValues from "@/components/money-values";
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import type { ExpensesByCategoryData } from "@/lib/dashboard/categories/expenses-by-category";
-import { formatPeriodForUrl } from "@/lib/utils/period";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { CategoryBreakdownWidgetView } from "./category-breakdown/category-breakdown-widget-view";
 
 type ExpensesByCategoryWidgetWithChartProps = {
 	data: ExpensesByCategoryData;
 	period: string;
 };
 
-const formatPercentage = (value: number) => {
-	return `${Math.abs(value).toFixed(0)}%`;
-};
-
-const formatCurrency = (value: number) =>
-	new Intl.NumberFormat("pt-BR", {
-		style: "currency",
-		currency: "BRL",
-	}).format(value);
-
 export function ExpensesByCategoryWidgetWithChart({
 	data,
 	period,
 }: ExpensesByCategoryWidgetWithChartProps) {
-	const [activeTab, setActiveTab] = useState<"list" | "chart">("list");
-	const periodParam = formatPeriodForUrl(period);
-
-	// Configuração do chart com cores do CSS
-	const chartConfig = useMemo(() => {
-		const config: ChartConfig = {};
-		const colors = [
-			"var(--chart-1)",
-			"var(--chart-2)",
-			"var(--chart-3)",
-			"var(--chart-4)",
-			"var(--chart-5)",
-			"var(--chart-1)",
-			"var(--chart-2)",
-		];
-
-		if (data.categories.length <= 7) {
-			data.categories.forEach((category, index) => {
-				config[category.categoryId] = {
-					label: category.categoryName,
-					color: colors[index % colors.length],
-				};
-			});
-		} else {
-			// Top 7 + Outros
-			const top7 = data.categories.slice(0, 7);
-			top7.forEach((category, index) => {
-				config[category.categoryId] = {
-					label: category.categoryName,
-					color: colors[index % colors.length],
-				};
-			});
-			config.outros = {
-				label: "Outros",
-				color: "var(--chart-6)",
-			};
-		}
-
-		return config;
-	}, [data.categories]);
-
-	// Preparar dados para o gráfico de pizza - Top 7 + Outros
-	const chartData = useMemo(() => {
-		if (data.categories.length <= 7) {
-			return data.categories.map((category) => ({
-				category: category.categoryId,
-				name: category.categoryName,
-				value: category.currentAmount,
-				percentage: category.percentageOfTotal,
-				fill: chartConfig[category.categoryId]?.color,
-			}));
-		}
-
-		// Pegar top 7 categorias
-		const top7 = data.categories.slice(0, 7);
-		const others = data.categories.slice(7);
-
-		// Somar o restante
-		const othersTotal = others.reduce((sum, cat) => sum + cat.currentAmount, 0);
-		const othersPercentage = others.reduce(
-			(sum, cat) => sum + cat.percentageOfTotal,
-			0,
-		);
-
-		const top7Data = top7.map((category) => ({
-			category: category.categoryId,
-			name: category.categoryName,
-			value: category.currentAmount,
-			percentage: category.percentageOfTotal,
-			fill: chartConfig[category.categoryId]?.color,
-		}));
-
-		// Adicionar "Outros" se houver
-		if (others.length > 0) {
-			top7Data.push({
-				category: "outros",
-				name: "Outros",
-				value: othersTotal,
-				percentage: othersPercentage,
-				fill: chartConfig.outros?.color,
-			});
-		}
-
-		return top7Data;
-	}, [data.categories, chartConfig]);
-
-	if (data.categories.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa encontrada"
-				description="Quando houver despesas registradas, elas aparecerão aqui."
-			/>
-		);
-	}
-
 	return (
-		<Tabs
-			value={activeTab}
-			onValueChange={(v) => setActiveTab(v as "list" | "chart")}
-			className="w-full"
-		>
-			<div className="flex items-center justify-between">
-				<TabsList className="grid grid-cols-2">
-					<TabsTrigger value="list" className="text-xs">
-						<RiListUnordered className="size-3.5 mr-1" />
-						Lista
-					</TabsTrigger>
-					<TabsTrigger value="chart" className="text-xs">
-						<RiPieChart2Line className="size-3.5 mr-1" />
-						Gráfico
-					</TabsTrigger>
-				</TabsList>
-			</div>
-
-			<TabsContent value="list" className="mt-0">
-				<div className="flex flex-col px-0">
-					{data.categories.map((category, index) => {
-						const hasIncrease =
-							category.percentageChange !== null &&
-							category.percentageChange > 0;
-						const hasDecrease =
-							category.percentageChange !== null &&
-							category.percentageChange < 0;
-						const hasBudget = category.budgetAmount !== null;
-						const budgetExceeded =
-							hasBudget &&
-							category.budgetUsedPercentage !== null &&
-							category.budgetUsedPercentage > 100;
-
-						const exceededAmount =
-							budgetExceeded && category.budgetAmount
-								? category.currentAmount - category.budgetAmount
-								: 0;
-
-						return (
-							<div
-								key={category.categoryId}
-								className="flex flex-col py-2 border-b border-dashed last:border-0"
-							>
-								<div className="flex items-center justify-between gap-3">
-									<div className="flex min-w-0 flex-1 items-center gap-2">
-										<CategoryIconBadge
-											icon={category.categoryIcon}
-											name={category.categoryName}
-											colorIndex={index}
-										/>
-
-										<div className="min-w-0 flex-1">
-											<div className="flex items-center gap-2">
-												<Link
-													href={`/categorias/${category.categoryId}?periodo=${periodParam}`}
-													className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
-												>
-													<span className="truncate">
-														{category.categoryName}
-													</span>
-													<RiExternalLinkLine
-														className="size-3 shrink-0 text-muted-foreground"
-														aria-hidden
-													/>
-												</Link>
-											</div>
-											<div className="flex items-center gap-2 text-xs text-muted-foreground">
-												<span>
-													{formatPercentage(category.percentageOfTotal)} da
-													despesa total
-												</span>
-											</div>
-										</div>
-									</div>
-
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
-										<MoneyValues
-											className="text-foreground"
-											amount={category.currentAmount}
-										/>
-										{category.percentageChange !== null && (
-											<span
-												className={`flex items-center gap-0.5 text-xs ${
-													hasIncrease
-														? "text-destructive"
-														: hasDecrease
-															? "text-success"
-															: "text-muted-foreground"
-												}`}
-											>
-												{hasIncrease && <RiArrowUpSFill className="size-3" />}
-												{hasDecrease && <RiArrowDownSFill className="size-3" />}
-												{formatPercentage(category.percentageChange)}
-											</span>
-										)}
-									</div>
-								</div>
-
-								{hasBudget && category.budgetUsedPercentage !== null && (
-									<div className="ml-11 flex items-center gap-1.5 text-xs">
-										<RiWallet3Line
-											className={`size-3 ${
-												budgetExceeded ? "text-destructive" : "text-info"
-											}`}
-										/>
-										<span
-											className={
-												budgetExceeded ? "text-destructive" : "text-info"
-											}
-										>
-											{budgetExceeded ? (
-												<>
-													{formatPercentage(category.budgetUsedPercentage)} do
-													limite - excedeu em {formatCurrency(exceededAmount)}
-												</>
-											) : (
-												<>
-													{formatPercentage(category.budgetUsedPercentage)} do
-													limite
-												</>
-											)}
-										</span>
-									</div>
-								)}
-							</div>
-						);
-					})}
-				</div>
-			</TabsContent>
-
-			<TabsContent value="chart" className="mt-0">
-				<div className="flex items-center gap-4">
-					<ChartContainer config={chartConfig} className="h-[280px] flex-1">
-						<PieChart>
-							<Pie
-								data={chartData}
-								cx="50%"
-								cy="50%"
-								labelLine={false}
-								label={(entry) => formatPercentage(entry.percentage)}
-								outerRadius={75}
-								dataKey="value"
-								nameKey="category"
-							/>
-							<Tooltip
-								content={({ active, payload }) => {
-									if (active && payload && payload.length) {
-										const data = payload[0].payload;
-										return (
-											<div className="rounded-lg border bg-background p-2 shadow-sm">
-												<div className="grid gap-2">
-													<div className="flex flex-col">
-														<span className="text-[0.70rem] uppercase text-muted-foreground">
-															{data.name}
-														</span>
-														<span className="font-bold text-foreground">
-															{formatCurrency(data.value)}
-														</span>
-														<span className="text-xs text-muted-foreground">
-															{formatPercentage(data.percentage)} do total
-														</span>
-													</div>
-												</div>
-											</div>
-										);
-									}
-									return null;
-								}}
-							/>
-						</PieChart>
-					</ChartContainer>
-
-					<div className="flex flex-col gap-2 min-w-[140px]">
-						{chartData.map((entry, index) => (
-							<div key={`legend-${index}`} className="flex items-center gap-2">
-								<div
-									className="size-3 rounded-sm shrink-0"
-									style={{ backgroundColor: entry.fill }}
-								/>
-								<span className="text-xs text-muted-foreground truncate">
-									{entry.name}
-								</span>
-							</div>
-						))}
-					</div>
-				</div>
-			</TabsContent>
-		</Tabs>
+		<CategoryBreakdownWidgetView
+			data={data}
+			period={period}
+			variant="expense"
+		/>
 	);
 }

components/dashboard/goals-progress-widget.tsx

@@ -1,146 +1,32 @@
 "use client";
 
-import { RiFundsLine, RiPencilLine } from "@remixicon/react";
-import { useCallback, useMemo, useState } from "react";
-import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
-import MoneyValues from "@/components/money-values";
-import { BudgetDialog } from "@/components/orcamentos/budget-dialog";
-import type { Budget, BudgetCategory } from "@/components/orcamentos/types";
-import { Button } from "@/components/ui/button";
-import { Progress } from "@/components/ui/progress";
 import type { GoalsProgressData } from "@/lib/dashboard/goals-progress";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { useGoalsProgressWidgetController } from "@/lib/dashboard/use-goals-progress-widget-controller";
+import { GoalsProgressWidgetView } from "./goals-progress/goals-progress-widget-view";
 
 type GoalsProgressWidgetProps = {
 	data: GoalsProgressData;
 };
 
-const clamp = (value: number, min: number, max: number) =>
-	Math.min(max, Math.max(min, value));
-
-const formatPercentage = (value: number, withSign = false) =>
-	`${new Intl.NumberFormat("pt-BR", {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 1,
-		...(withSign ? { signDisplay: "always" as const } : {}),
-	}).format(value)}%`;
-
 export function GoalsProgressWidget({ data }: GoalsProgressWidgetProps) {
-	const [editOpen, setEditOpen] = useState(false);
-	const [selectedBudget, setSelectedBudget] = useState<Budget | null>(null);
-
-	const categories = useMemo<BudgetCategory[]>(
-		() =>
-			data.categories.map((category) => ({
-				id: category.id,
-				name: category.name,
-				icon: category.icon,
-			})),
-		[data.categories],
-	);
-
-	const defaultPeriod = data.items[0]?.period ?? "";
-
-	const handleEdit = useCallback((item: GoalsProgressData["items"][number]) => {
-		setSelectedBudget({
-			id: item.id,
-			amount: item.budgetAmount,
-			spent: item.spentAmount,
-			period: item.period,
-			createdAt: item.createdAt,
-			category: item.categoryId
-				? {
-						id: item.categoryId,
-						name: item.categoryName,
-						icon: item.categoryIcon,
-					}
-				: null,
-		});
-		setEditOpen(true);
-	}, []);
-
-	const handleEditOpenChange = useCallback((open: boolean) => {
-		setEditOpen(open);
-		if (!open) {
-			setSelectedBudget(null);
-		}
-	}, []);
-
-	if (data.items.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={<RiFundsLine className="size-6 text-muted-foreground" />}
-				title="Nenhum orçamento para o período"
-				description="Cadastre orçamentos para acompanhar o progresso das metas."
-			/>
-		);
-	}
+	const {
+		selectedBudget,
+		editOpen,
+		categories,
+		defaultPeriod,
+		handleEdit,
+		handleEditOpenChange,
+	} = useGoalsProgressWidgetController(data);
 
 	return (
-		<div className="flex flex-col gap-4 px-0">
-			<ul className="flex flex-col">
-				{data.items.map((item, index) => {
-					const statusColor =
-						item.status === "exceeded" ? "text-destructive" : "";
-					const progressValue = clamp(item.usedPercentage, 0, 100);
-					const percentageDelta = item.usedPercentage - 100;
-
-					return (
-						<li
-							key={item.id}
-							className="border-b border-dashed py-2 last:border-b-0 last:pb-0"
-						>
-							<div className="flex items-start justify-between gap-3">
-								<div className="flex min-w-0 flex-1 items-start gap-2">
-									<CategoryIconBadge
-										icon={item.categoryIcon}
-										name={item.categoryName}
-										colorIndex={index}
-										size="md"
-									/>
-									<div className="min-w-0 flex-1">
-										<p className="truncate text-sm font-medium text-foreground">
-											{item.categoryName}
-										</p>
-										<p className="mt-0.5 text-xs text-muted-foreground">
-											<MoneyValues amount={item.spentAmount} /> de{" "}
-											<MoneyValues amount={item.budgetAmount} />
-										</p>
-									</div>
-								</div>
-
-								<div className="flex shrink-0 items-center gap-2">
-									<span className={`text-xs font-medium ${statusColor}`}>
-										{formatPercentage(percentageDelta, true)}
-									</span>
-									<Button
-										type="button"
-										variant="ghost"
-										size="icon-sm"
-										className="size-7 text-muted-foreground hover:text-foreground"
-										onClick={() => handleEdit(item)}
-										aria-label={`Editar orçamento de ${item.categoryName}`}
-									>
-										<RiPencilLine className="size-3.5" />
-									</Button>
-								</div>
-							</div>
-							<div className="mt-1.5 ml-11">
-								<Progress value={progressValue} />
-							</div>
-						</li>
-					);
-				})}
-			</ul>
-
-			<BudgetDialog
-				mode="update"
-				budget={selectedBudget ?? undefined}
-				categories={categories}
-				defaultPeriod={defaultPeriod}
-				open={editOpen && !!selectedBudget}
-				onOpenChange={handleEditOpenChange}
-			/>
-		</div>
+		<GoalsProgressWidgetView
+			data={data}
+			selectedBudget={selectedBudget}
+			editOpen={editOpen}
+			categories={categories}
+			defaultPeriod={defaultPeriod}
+			onEdit={handleEdit}
+			onEditOpenChange={handleEditOpenChange}
+		/>
 	);
 }

components/dashboard/goals-progress/goal-progress-item.tsx

@@ -0,0 +1,70 @@
+import { RiPencilLine } from "@remixicon/react";
+import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
+import MoneyValues from "@/components/shared/money-values";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import type { GoalProgressItem as GoalProgressItemData } from "@/lib/dashboard/goals-progress";
+import {
+	clampGoalProgress,
+	formatGoalProgressPercentage,
+	getGoalProgressStatusColorClass,
+} from "@/lib/dashboard/goals-progress-helpers";
+
+type GoalProgressItemProps = {
+	item: GoalProgressItemData;
+	index: number;
+	onEdit: (item: GoalProgressItemData) => void;
+};
+
+export function GoalProgressItem({
+	item,
+	index,
+	onEdit,
+}: GoalProgressItemProps) {
+	const statusColor = getGoalProgressStatusColorClass(item.status);
+	const progressValue = clampGoalProgress(item.usedPercentage, 0, 100);
+	const percentageDelta = item.usedPercentage - 100;
+
+	return (
+		<li className="border-b border-dashed py-2 last:border-b-0 last:pb-0">
+			<div className="flex items-start justify-between gap-3">
+				<div className="flex min-w-0 flex-1 items-start gap-2">
+					<CategoryIconBadge
+						icon={item.categoryIcon}
+						name={item.categoryName}
+						colorIndex={index}
+						size="md"
+					/>
+					<div className="min-w-0 flex-1">
+						<p className="truncate text-sm font-medium text-foreground">
+							{item.categoryName}
+						</p>
+						<p className="mt-0.5 text-xs text-muted-foreground">
+							<MoneyValues amount={item.spentAmount} /> de{" "}
+							<MoneyValues amount={item.budgetAmount} />
+						</p>
+					</div>
+				</div>
+
+				<div className="flex shrink-0 items-center gap-2">
+					<span className={`text-xs font-medium ${statusColor}`}>
+						{formatGoalProgressPercentage(percentageDelta, true)}
+					</span>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon-sm"
+						className="size-7 text-muted-foreground hover:text-foreground"
+						onClick={() => onEdit(item)}
+						aria-label={`Editar orçamento de ${item.categoryName}`}
+					>
+						<RiPencilLine className="size-3.5" />
+					</Button>
+				</div>
+			</div>
+			<div className="ml-11 mt-1.5">
+				<Progress value={progressValue} />
+			</div>
+		</li>
+	);
+}

components/dashboard/goals-progress/goals-progress-list.tsx

@@ -0,0 +1,34 @@
+import { RiFundsLine } from "@remixicon/react";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { GoalProgressItem } from "@/lib/dashboard/goals-progress";
+import { GoalProgressItem as GoalProgressListItem } from "./goal-progress-item";
+
+type GoalsProgressListProps = {
+	items: GoalProgressItem[];
+	onEdit: (item: GoalProgressItem) => void;
+};
+
+export function GoalsProgressList({ items, onEdit }: GoalsProgressListProps) {
+	if (items.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiFundsLine className="size-6 text-muted-foreground" />}
+				title="Nenhum orçamento para o período"
+				description="Cadastre orçamentos para acompanhar o progresso das metas."
+			/>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col">
+			{items.map((item, index) => (
+				<GoalProgressListItem
+					key={item.id}
+					item={item}
+					index={index}
+					onEdit={onEdit}
+				/>
+			))}
+		</ul>
+	);
+}

components/dashboard/goals-progress/goals-progress-widget-dialogs.tsx

@@ -0,0 +1,29 @@
+import { BudgetDialog } from "@/components/orcamentos/budget-dialog";
+import type { Budget, BudgetCategory } from "@/components/orcamentos/types";
+
+type GoalsProgressWidgetDialogsProps = {
+	selectedBudget: Budget | null;
+	editOpen: boolean;
+	categories: BudgetCategory[];
+	defaultPeriod: string;
+	onEditOpenChange: (open: boolean) => void;
+};
+
+export function GoalsProgressWidgetDialogs({
+	selectedBudget,
+	editOpen,
+	categories,
+	defaultPeriod,
+	onEditOpenChange,
+}: GoalsProgressWidgetDialogsProps) {
+	return (
+		<BudgetDialog
+			mode="update"
+			budget={selectedBudget ?? undefined}
+			categories={categories}
+			defaultPeriod={defaultPeriod}
+			open={editOpen && !!selectedBudget}
+			onOpenChange={onEditOpenChange}
+		/>
+	);
+}

components/dashboard/goals-progress/goals-progress-widget-view.tsx

@@ -0,0 +1,41 @@
+import type { Budget, BudgetCategory } from "@/components/orcamentos/types";
+import type {
+	GoalProgressItem,
+	GoalsProgressData,
+} from "@/lib/dashboard/goals-progress";
+import { GoalsProgressList } from "./goals-progress-list";
+import { GoalsProgressWidgetDialogs } from "./goals-progress-widget-dialogs";
+
+type GoalsProgressWidgetViewProps = {
+	data: GoalsProgressData;
+	selectedBudget: Budget | null;
+	editOpen: boolean;
+	categories: BudgetCategory[];
+	defaultPeriod: string;
+	onEdit: (item: GoalProgressItem) => void;
+	onEditOpenChange: (open: boolean) => void;
+};
+
+export function GoalsProgressWidgetView({
+	data,
+	selectedBudget,
+	editOpen,
+	categories,
+	defaultPeriod,
+	onEdit,
+	onEditOpenChange,
+}: GoalsProgressWidgetViewProps) {
+	return (
+		<div className="flex flex-col gap-4 px-0">
+			<GoalsProgressList items={data.items} onEdit={onEdit} />
+
+			<GoalsProgressWidgetDialogs
+				selectedBudget={selectedBudget}
+				editOpen={editOpen}
+				categories={categories}
+				defaultPeriod={defaultPeriod}
+				onEditOpenChange={onEditOpenChange}
+			/>
+		</div>
+	);
+}

components/dashboard/income-by-category-widget-with-chart.tsx

@@ -1,331 +1,18 @@
 "use client";
 
-import {
-	RiArrowDownSFill,
-	RiArrowUpSFill,
-	RiExternalLinkLine,
-	RiListUnordered,
-	RiPieChart2Line,
-	RiPieChartLine,
-	RiWallet3Line,
-} from "@remixicon/react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { Pie, PieChart, Tooltip } from "recharts";
-import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
-import MoneyValues from "@/components/money-values";
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import type { IncomeByCategoryData } from "@/lib/dashboard/categories/income-by-category";
-import { formatPeriodForUrl } from "@/lib/utils/period";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { CategoryBreakdownWidgetView } from "./category-breakdown/category-breakdown-widget-view";
 
 type IncomeByCategoryWidgetWithChartProps = {
 	data: IncomeByCategoryData;
 	period: string;
 };
 
-const formatPercentage = (value: number) => {
-	return `${Math.abs(value).toFixed(1)}%`;
-};
-
-const formatCurrency = (value: number) =>
-	new Intl.NumberFormat("pt-BR", {
-		style: "currency",
-		currency: "BRL",
-	}).format(value);
-
 export function IncomeByCategoryWidgetWithChart({
 	data,
 	period,
 }: IncomeByCategoryWidgetWithChartProps) {
-	const [activeTab, setActiveTab] = useState<"list" | "chart">("list");
-	const periodParam = formatPeriodForUrl(period);
-
-	// Configuração do chart com cores do CSS
-	const chartConfig = useMemo(() => {
-		const config: ChartConfig = {};
-		const colors = [
-			"var(--chart-1)",
-			"var(--chart-2)",
-			"var(--chart-3)",
-			"var(--chart-4)",
-			"var(--chart-5)",
-			"var(--chart-1)",
-			"var(--chart-2)",
-		];
-
-		if (data.categories.length <= 7) {
-			data.categories.forEach((category, index) => {
-				config[category.categoryId] = {
-					label: category.categoryName,
-					color: colors[index % colors.length],
-				};
-			});
-		} else {
-			// Top 7 + Outros
-			const top7 = data.categories.slice(0, 7);
-			top7.forEach((category, index) => {
-				config[category.categoryId] = {
-					label: category.categoryName,
-					color: colors[index % colors.length],
-				};
-			});
-			config.outros = {
-				label: "Outros",
-				color: "var(--chart-6)",
-			};
-		}
-
-		return config;
-	}, [data.categories]);
-
-	// Preparar dados para o gráfico de pizza - Top 7 + Outros
-	const chartData = useMemo(() => {
-		if (data.categories.length <= 7) {
-			return data.categories.map((category) => ({
-				category: category.categoryId,
-				name: category.categoryName,
-				value: category.currentAmount,
-				percentage: category.percentageOfTotal,
-				fill: chartConfig[category.categoryId]?.color,
-			}));
-		}
-
-		// Pegar top 7 categorias
-		const top7 = data.categories.slice(0, 7);
-		const others = data.categories.slice(7);
-
-		// Somar o restante
-		const othersTotal = others.reduce((sum, cat) => sum + cat.currentAmount, 0);
-		const othersPercentage = others.reduce(
-			(sum, cat) => sum + cat.percentageOfTotal,
-			0,
-		);
-
-		const top7Data = top7.map((category) => ({
-			category: category.categoryId,
-			name: category.categoryName,
-			value: category.currentAmount,
-			percentage: category.percentageOfTotal,
-			fill: chartConfig[category.categoryId]?.color,
-		}));
-
-		// Adicionar "Outros" se houver
-		if (others.length > 0) {
-			top7Data.push({
-				category: "outros",
-				name: "Outros",
-				value: othersTotal,
-				percentage: othersPercentage,
-				fill: chartConfig.outros?.color,
-			});
-		}
-
-		return top7Data;
-	}, [data.categories, chartConfig]);
-
-	if (data.categories.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma receita encontrada"
-				description="Quando houver receitas registradas, elas aparecerão aqui."
-			/>
-		);
-	}
-
 	return (
-		<Tabs
-			value={activeTab}
-			onValueChange={(v) => setActiveTab(v as "list" | "chart")}
-			className="w-full"
-		>
-			<div className="flex items-center justify-between">
-				<TabsList className="grid grid-cols-2">
-					<TabsTrigger value="list" className="text-xs">
-						<RiListUnordered className="size-3.5 mr-1" />
-						Lista
-					</TabsTrigger>
-					<TabsTrigger value="chart" className="text-xs">
-						<RiPieChart2Line className="size-3.5 mr-1" />
-						Gráfico
-					</TabsTrigger>
-				</TabsList>
-			</div>
-
-			<TabsContent value="list" className="mt-0">
-				<div className="flex flex-col px-0">
-					{data.categories.map((category, index) => {
-						const hasIncrease =
-							category.percentageChange !== null &&
-							category.percentageChange > 0;
-						const hasDecrease =
-							category.percentageChange !== null &&
-							category.percentageChange < 0;
-						const hasBudget = category.budgetAmount !== null;
-						const budgetExceeded =
-							hasBudget &&
-							category.budgetUsedPercentage !== null &&
-							category.budgetUsedPercentage > 100;
-
-						const exceededAmount =
-							budgetExceeded && category.budgetAmount
-								? category.currentAmount - category.budgetAmount
-								: 0;
-
-						return (
-							<div
-								key={category.categoryId}
-								className="flex flex-col gap-1.5 py-2 border-b border-dashed last:border-0"
-							>
-								<div className="flex items-center justify-between gap-3">
-									<div className="flex min-w-0 flex-1 items-center gap-2">
-										<CategoryIconBadge
-											icon={category.categoryIcon}
-											name={category.categoryName}
-											colorIndex={index}
-										/>
-
-										<div className="min-w-0 flex-1">
-											<div className="flex items-center gap-2">
-												<Link
-													href={`/categorias/${category.categoryId}?periodo=${periodParam}`}
-													className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
-												>
-													<span className="truncate">
-														{category.categoryName}
-													</span>
-													<RiExternalLinkLine
-														className="size-3 shrink-0 text-muted-foreground"
-														aria-hidden
-													/>
-												</Link>
-											</div>
-											<div className="flex items-center gap-2 text-xs text-muted-foreground">
-												<span>
-													{formatPercentage(category.percentageOfTotal)} da
-													receita total
-												</span>
-											</div>
-										</div>
-									</div>
-
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
-										<MoneyValues
-											className="text-foreground"
-											amount={category.currentAmount}
-										/>
-										{category.percentageChange !== null && (
-											<span
-												className={`flex items-center gap-0.5 text-xs ${
-													hasIncrease
-														? "text-success"
-														: hasDecrease
-															? "text-destructive"
-															: "text-muted-foreground"
-												}`}
-											>
-												{hasIncrease && <RiArrowUpSFill className="size-3" />}
-												{hasDecrease && <RiArrowDownSFill className="size-3" />}
-												{formatPercentage(category.percentageChange)}
-											</span>
-										)}
-									</div>
-								</div>
-
-								{hasBudget &&
-									category.budgetUsedPercentage !== null &&
-									category.budgetAmount !== null && (
-										<div className="ml-11 flex items-center gap-1.5 text-xs">
-											<RiWallet3Line
-												className={`size-3 ${
-													budgetExceeded ? "text-destructive" : "text-info"
-												}`}
-											/>
-											<span
-												className={
-													budgetExceeded ? "text-destructive" : "text-info"
-												}
-											>
-												{budgetExceeded ? (
-													<>
-														{formatPercentage(category.budgetUsedPercentage)} do
-														limite {formatCurrency(category.budgetAmount)} -
-														excedeu em {formatCurrency(exceededAmount)}
-													</>
-												) : (
-													<>
-														{formatPercentage(category.budgetUsedPercentage)} do
-														limite {formatCurrency(category.budgetAmount)}
-													</>
-												)}
-											</span>
-										</div>
-									)}
-							</div>
-						);
-					})}
-				</div>
-			</TabsContent>
-
-			<TabsContent value="chart" className="mt-0">
-				<div className="flex items-center gap-4">
-					<ChartContainer config={chartConfig} className="h-[280px] flex-1">
-						<PieChart>
-							<Pie
-								data={chartData}
-								cx="50%"
-								cy="50%"
-								labelLine={false}
-								label={(entry) => formatPercentage(entry.percentage)}
-								outerRadius={75}
-								dataKey="value"
-								nameKey="category"
-							/>
-							<Tooltip
-								content={({ active, payload }) => {
-									if (active && payload && payload.length) {
-										const data = payload[0].payload;
-										return (
-											<div className="rounded-lg border bg-background p-2 shadow-sm">
-												<div className="grid gap-2">
-													<div className="flex flex-col">
-														<span className="text-[0.70rem] uppercase text-muted-foreground">
-															{data.name}
-														</span>
-														<span className="font-bold text-foreground">
-															{formatCurrency(data.value)}
-														</span>
-														<span className="text-xs text-muted-foreground">
-															{formatPercentage(data.percentage)} do total
-														</span>
-													</div>
-												</div>
-											</div>
-										);
-									}
-									return null;
-								}}
-							/>
-						</PieChart>
-					</ChartContainer>
-
-					<div className="flex flex-col gap-2 min-w-[140px]">
-						{chartData.map((entry, index) => (
-							<div key={`legend-${index}`} className="flex items-center gap-2">
-								<div
-									className="size-3 rounded-sm shrink-0"
-									style={{ backgroundColor: entry.fill }}
-								/>
-								<span className="text-xs text-muted-foreground truncate">
-									{entry.name}
-								</span>
-							</div>
-						))}
-					</div>
-				</div>
-			</TabsContent>
-		</Tabs>
+		<CategoryBreakdownWidgetView data={data} period={period} variant="income" />
 	);
 }

components/dashboard/income-expense-balance-widget.tsx

@@ -2,14 +2,15 @@
 
 import { RiLineChartLine } from "@remixicon/react";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 import { CardContent } from "@/components/ui/card";
 import {
 	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 } from "@/components/ui/chart";
-import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { IncomeExpenseBalanceData } from "@/lib/dashboard/income-expense-balance";
+import { formatCurrency } from "@/lib/utils/currency";
 
 type IncomeExpenseBalanceWidgetProps = {
 	data: IncomeExpenseBalanceData;
@@ -80,15 +81,6 @@ export function IncomeExpenseBalanceWidget({
 								return null;
 							}
 
-							const formatCurrency = (value: number) => {
-								return new Intl.NumberFormat("pt-BR", {
-									style: "currency",
-									currency: "BRL",
-									minimumFractionDigits: 2,
-									maximumFractionDigits: 2,
-								}).format(value);
-							};
-
 							return (
 								<div className="rounded-lg border bg-background p-2 shadow-sm">
 									<div className="grid gap-2">
@@ -103,7 +95,7 @@ export function IncomeExpenseBalanceWidget({
 													className="flex items-center gap-2"
 												>
 													<div
-														className="h-3 w-3 rounded-full"
+														className="size-2 rounded-full"
 														style={{ backgroundColor: config?.color }}
 													/>
 													<span className="text-xs text-muted-foreground">
@@ -144,7 +136,7 @@ export function IncomeExpenseBalanceWidget({
 			<div className="flex items-center justify-center gap-6">
 				<div className="flex items-center gap-2">
 					<div
-						className="h-3 w-3 rounded-full"
+						className="size-2 rounded-full"
 						style={{ backgroundColor: chartConfig.receita.color }}
 					/>
 					<span className="text-sm text-muted-foreground">
@@ -153,7 +145,7 @@ export function IncomeExpenseBalanceWidget({
 				</div>
 				<div className="flex items-center gap-2">
 					<div
-						className="h-3 w-3 rounded-full"
+						className="size-2 rounded-full"
 						style={{ backgroundColor: chartConfig.despesa.color }}
 					/>
 					<span className="text-sm text-muted-foreground">
@@ -162,7 +154,7 @@ export function IncomeExpenseBalanceWidget({
 				</div>
 				<div className="flex items-center gap-2">
 					<div
-						className="h-3 w-3 rounded-full"
+						className="size-2 rounded-full"
 						style={{ backgroundColor: chartConfig.balanco.color }}
 					/>
 					<span className="text-sm text-muted-foreground">

components/dashboard/installment-analysis/installment-analysis-page.tsx

@@ -6,7 +6,7 @@ import {
 	RiCheckboxLine,
 } from "@remixicon/react";
 import { useMemo, useState } from "react";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { InstallmentGroupCard } from "./installment-group-card";

components/dashboard/installment-analysis/installment-group-card.tsx

@@ -8,7 +8,7 @@ import {
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useState } from "react";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";

components/dashboard/installment-expenses-widget.tsx

@@ -1,191 +1,12 @@
-import { RiNumbersLine } from "@remixicon/react";
-import Image from "next/image";
-import MoneyValues from "@/components/money-values";
-import { CardContent } from "@/components/ui/card";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import type { InstallmentExpensesData } from "@/lib/dashboard/expenses/installment-expenses";
-import {
-	calculateLastInstallmentDate,
-	formatLastInstallmentDate,
-} from "@/lib/installments/utils";
-import { Progress } from "../ui/progress";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { InstallmentExpensesWidgetView } from "./installment-expenses/installment-expenses-widget-view";
 
 type InstallmentExpensesWidgetProps = {
 	data: InstallmentExpensesData;
 };
 
-const buildCompactInstallmentLabel = (
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	if (currentInstallment && installmentCount) {
-		return `${currentInstallment} de ${installmentCount}`;
-	}
-	return null;
-};
-
-const isLastInstallment = (
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	if (!currentInstallment || !installmentCount) return false;
-	return currentInstallment === installmentCount && installmentCount > 1;
-};
-
-const calculateRemainingInstallments = (
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	if (!currentInstallment || !installmentCount) return 0;
-	return Math.max(0, installmentCount - currentInstallment);
-};
-
-const calculateRemainingAmount = (
-	amount: number,
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	const remaining = calculateRemainingInstallments(
-		currentInstallment,
-		installmentCount,
-	);
-	return amount * remaining;
-};
-
-const formatEndDate = (
-	period: string,
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	if (!currentInstallment || !installmentCount) return null;
-
-	const lastDate = calculateLastInstallmentDate(
-		period,
-		currentInstallment,
-		installmentCount,
-	);
-
-	return formatLastInstallmentDate(lastDate);
-};
-
-const buildProgress = (
-	currentInstallment: number | null,
-	installmentCount: number | null,
-) => {
-	if (!currentInstallment || !installmentCount || installmentCount <= 0) {
-		return 0;
-	}
-
-	return Math.min(
-		100,
-		Math.max(0, (currentInstallment / installmentCount) * 100),
-	);
-};
-
 export function InstallmentExpensesWidget({
 	data,
 }: InstallmentExpensesWidgetProps) {
-	if (data.expenses.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={<RiNumbersLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa parcelada"
-				description="Lançamentos parcelados aparecerão aqui conforme forem registrados."
-			/>
-		);
-	}
-
-	return (
-		<CardContent className="flex flex-col gap-4 px-0">
-			<ul className="flex flex-col gap-2">
-				{data.expenses.map((expense) => {
-					const compactLabel = buildCompactInstallmentLabel(
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-					const isLast = isLastInstallment(
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-					const remainingInstallments = calculateRemainingInstallments(
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-					const remainingAmount = calculateRemainingAmount(
-						expense.amount,
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-					const endDate = formatEndDate(
-						expense.period,
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-					const progress = buildProgress(
-						expense.currentInstallment,
-						expense.installmentCount,
-					);
-
-					return (
-						<li
-							key={expense.id}
-							className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
-						>
-							<div className="min-w-0 flex-1">
-								<div className="flex items-center justify-between gap-3">
-									<div className="flex min-w-0 items-center gap-2">
-										<p className="truncate text-sm font-medium text-foreground">
-											{expense.name}
-										</p>
-										{compactLabel && (
-											<span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground">
-												{compactLabel}
-												{isLast && (
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<span className="inline-flex">
-																<Image
-																	src="/icones/party.svg"
-																	alt="Última parcela"
-																	width={14}
-																	height={14}
-																	className="h-3.5 w-3.5"
-																/>
-																<span className="sr-only">Última parcela</span>
-															</span>
-														</TooltipTrigger>
-														<TooltipContent side="top">
-															Última parcela!
-														</TooltipContent>
-													</Tooltip>
-												)}
-											</span>
-										)}
-									</div>
-									<MoneyValues amount={expense.amount} className="shrink-0" />
-								</div>
-
-								<p className="text-xs text-muted-foreground ">
-									{endDate && `Termina em ${endDate}`}
-									{" | Restante  "}
-									<MoneyValues
-										amount={remainingAmount}
-										className="inline-block font-medium"
-									/>{" "}
-									({remainingInstallments})
-								</p>
-
-								<Progress value={progress} className="h-2 mt-1" />
-							</div>
-						</li>
-					);
-				})}
-			</ul>
-		</CardContent>
-	);
+	return <InstallmentExpensesWidgetView data={data} />;
 }

components/dashboard/installment-expenses/installment-expense-list-item.tsx

@@ -0,0 +1,76 @@
+import Image from "next/image";
+import MoneyValues from "@/components/shared/money-values";
+import { Progress } from "@/components/ui/progress";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { InstallmentExpense } from "@/lib/dashboard/expenses/installment-expenses";
+import { buildInstallmentExpenseDisplay } from "@/lib/dashboard/installment-expenses-helpers";
+
+type InstallmentExpenseListItemProps = {
+	expense: InstallmentExpense;
+};
+
+export function InstallmentExpenseListItem({
+	expense,
+}: InstallmentExpenseListItemProps) {
+	const {
+		compactLabel,
+		isLast,
+		remainingInstallments,
+		remainingAmount,
+		endDate,
+		progress,
+	} = buildInstallmentExpenseDisplay(expense);
+
+	return (
+		<li className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0">
+			<div className="min-w-0 flex-1">
+				<div className="flex items-center justify-between gap-3">
+					<div className="flex min-w-0 items-center gap-2">
+						<p className="truncate text-sm font-medium text-foreground">
+							{expense.name}
+						</p>
+						{compactLabel ? (
+							<span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground">
+								{compactLabel}
+								{isLast ? (
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<span className="inline-flex">
+												<Image
+													src="/icones/party.svg"
+													alt="Última parcela"
+													width={14}
+													height={14}
+													className="h-3.5 w-3.5"
+												/>
+												<span className="sr-only">Última parcela</span>
+											</span>
+										</TooltipTrigger>
+										<TooltipContent side="top">Última parcela!</TooltipContent>
+									</Tooltip>
+								) : null}
+							</span>
+						) : null}
+					</div>
+					<MoneyValues amount={expense.amount} className="shrink-0" />
+				</div>
+
+				<p className="text-xs text-muted-foreground">
+					{endDate ? `Termina em ${endDate}` : null}
+					{" | Restante  "}
+					<MoneyValues
+						amount={remainingAmount}
+						className="inline-block font-medium"
+					/>{" "}
+					({remainingInstallments})
+				</p>
+
+				<Progress value={progress} className="mt-1 h-2" />
+			</div>
+		</li>
+	);
+}

components/dashboard/installment-expenses/installment-expenses-list.tsx

@@ -0,0 +1,30 @@
+import { RiNumbersLine } from "@remixicon/react";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { InstallmentExpense } from "@/lib/dashboard/expenses/installment-expenses";
+import { InstallmentExpenseListItem } from "./installment-expense-list-item";
+
+type InstallmentExpensesListProps = {
+	expenses: InstallmentExpense[];
+};
+
+export function InstallmentExpensesList({
+	expenses,
+}: InstallmentExpensesListProps) {
+	if (expenses.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiNumbersLine className="size-6 text-muted-foreground" />}
+				title="Nenhuma despesa parcelada"
+				description="Lançamentos parcelados aparecerão aqui conforme forem registrados."
+			/>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col gap-2">
+			{expenses.map((expense) => (
+				<InstallmentExpenseListItem key={expense.id} expense={expense} />
+			))}
+		</ul>
+	);
+}

components/dashboard/installment-expenses/installment-expenses-widget-view.tsx

@@ -0,0 +1,16 @@
+import type { InstallmentExpensesData } from "@/lib/dashboard/expenses/installment-expenses";
+import { InstallmentExpensesList } from "./installment-expenses-list";
+
+type InstallmentExpensesWidgetViewProps = {
+	data: InstallmentExpensesData;
+};
+
+export function InstallmentExpensesWidgetView({
+	data,
+}: InstallmentExpensesWidgetViewProps) {
+	return (
+		<div className="flex flex-col gap-4 px-0">
+			<InstallmentExpensesList expenses={data.expenses} />
+		</div>
+	);
+}

components/dashboard/invoices-widget.tsx

@@ -1,584 +1,35 @@
 "use client";
-import {
-	RiBillLine,
-	RiCheckboxCircleFill,
-	RiCheckboxCircleLine,
-	RiExternalLinkLine,
-	RiLoader4Line,
-	RiMoneyDollarCircleLine,
-} from "@remixicon/react";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState, useTransition } from "react";
-import { toast } from "sonner";
-import { updateInvoicePaymentStatusAction } from "@/app/(dashboard)/cartoes/[cartaoId]/fatura/actions";
-import MoneyValues from "@/components/money-values";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogFooter as ModalFooter,
-} from "@/components/ui/dialog";
+
 import type { DashboardInvoice } from "@/lib/dashboard/invoices";
-import { INVOICE_PAYMENT_STATUS, INVOICE_STATUS_LABEL } from "@/lib/faturas";
-import { getAvatarSrc } from "@/lib/pagadores/utils";
-import { formatPeriodForUrl } from "@/lib/utils/period";
-import { Badge } from "../ui/badge";
-import {
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-} from "../ui/hover-card";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { useInvoicesWidgetController } from "@/lib/dashboard/use-invoices-widget-controller";
+import { InvoicesWidgetView } from "./invoices/invoices-widget-view";
 
 type InvoicesWidgetProps = {
 	invoices: DashboardInvoice[];
 };
 
-type ModalState = "idle" | "processing" | "success";
-
-const DUE_DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-	timeZone: "UTC",
-});
-
-const resolveLogoPath = (logo: string | null) => {
-	if (!logo) {
-		return null;
-	}
-	if (/^(https?:\/\/|data:)/.test(logo)) {
-		return logo;
-	}
-	return logo.startsWith("/") ? logo : `/logos/${logo}`;
-};
-
-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";
-};
-
-const parseDueDate = (period: string, dueDay: string) => {
-	const [yearStr, monthStr] = period.split("-");
-	const dayNumber = Number.parseInt(dueDay, 10);
-	const year = Number.parseInt(yearStr ?? "", 10);
-	const month = Number.parseInt(monthStr ?? "", 10);
-
-	if (
-		Number.isNaN(dayNumber) ||
-		Number.isNaN(year) ||
-		Number.isNaN(month) ||
-		period.length !== 7
-	) {
-		return {
-			label: `Vence dia ${dueDay}`,
-			date: null,
-		};
-	}
-
-	const date = new Date(Date.UTC(year, month - 1, dayNumber));
-	return {
-		label: `Vence em ${DUE_DATE_FORMATTER.format(date)}`,
-		date,
-	};
-};
-
-const formatPaymentDate = (value: string | null) => {
-	if (!value) {
-		return null;
-	}
-
-	const [yearStr, monthStr, dayStr] = value.split("-");
-	const year = Number.parseInt(yearStr ?? "", 10);
-	const month = Number.parseInt(monthStr ?? "", 10);
-	const day = Number.parseInt(dayStr ?? "", 10);
-
-	if (
-		Number.isNaN(year) ||
-		Number.isNaN(month) ||
-		Number.isNaN(day) ||
-		yearStr?.length !== 4 ||
-		monthStr?.length !== 2 ||
-		dayStr?.length !== 2
-	) {
-		return null;
-	}
-
-	const date = new Date(Date.UTC(year, month - 1, day));
-	return {
-		label: `Pago em ${DUE_DATE_FORMATTER.format(date)}`,
-	};
-};
-
-const getTodayDateString = () => {
-	const now = new Date();
-	const year = now.getFullYear();
-	const month = String(now.getMonth() + 1).padStart(2, "0");
-	const day = String(now.getDate()).padStart(2, "0");
-	return `${year}-${month}-${day}`;
-};
-
-const formatSharePercentage = (value: number) => {
-	if (!Number.isFinite(value) || value <= 0) {
-		return "0%";
-	}
-	const digits = value >= 10 ? 0 : value >= 1 ? 1 : 2;
-	return `${value.toLocaleString("pt-BR", {
-		minimumFractionDigits: digits,
-		maximumFractionDigits: digits,
-	})}%`;
-};
-
-const getShareLabel = (amount: number, total: number) => {
-	if (total <= 0) {
-		return "0% do total";
-	}
-	const percentage = (amount / total) * 100;
-	return `${formatSharePercentage(percentage)} do total`;
-};
-
 export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
-	const router = useRouter();
-	const [isPending, startTransition] = useTransition();
-	const [items, setItems] = useState(invoices);
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [selectedId, setSelectedId] = useState<string | null>(null);
-	const [modalState, setModalState] = useState<ModalState>("idle");
-
-	useEffect(() => {
-		setItems(invoices);
-	}, [invoices]);
-
-	const selectedInvoice = useMemo(
-		() => items.find((invoice) => invoice.id === selectedId) ?? null,
-		[items, selectedId],
-	);
-
-	const selectedLogo = useMemo(
-		() => (selectedInvoice ? resolveLogoPath(selectedInvoice.logo) : null),
-		[selectedInvoice],
-	);
-
-	const selectedPaymentInfo = useMemo(
-		() => (selectedInvoice ? formatPaymentDate(selectedInvoice.paidAt) : null),
-		[selectedInvoice],
-	);
-
-	const handleOpenModal = (invoiceId: string) => {
-		setSelectedId(invoiceId);
-		setModalState("idle");
-		setIsModalOpen(true);
-	};
-
-	const handleCloseModal = () => {
-		setIsModalOpen(false);
-		setModalState("idle");
-		setSelectedId(null);
-	};
-
-	const handleConfirmPayment = () => {
-		if (!selectedInvoice) {
-			return;
-		}
-
-		setModalState("processing");
-
-		startTransition(async () => {
-			const result = await updateInvoicePaymentStatusAction({
-				cartaoId: selectedInvoice.cardId,
-				period: selectedInvoice.period,
-				status: INVOICE_PAYMENT_STATUS.PAID,
-			});
-
-			if (result.success) {
-				toast.success(result.message);
-				setItems((previous) =>
-					previous.map((invoice) =>
-						invoice.id === selectedInvoice.id
-							? {
-									...invoice,
-									paymentStatus: INVOICE_PAYMENT_STATUS.PAID,
-									paidAt: getTodayDateString(),
-								}
-							: invoice,
-					),
-				);
-				setModalState("success");
-				router.refresh();
-				return;
-			}
-
-			toast.error(result.error);
-			setModalState("idle");
-		});
-	};
-
-	const getStatusBadgeVariant = (status: string): "success" | "info" => {
-		const normalizedStatus = status.toLowerCase();
-		if (normalizedStatus === "em aberto") {
-			return "info";
-		}
-		return "success";
-	};
+	const {
+		items,
+		selectedInvoice,
+		isModalOpen,
+		modalState,
+		isPending,
+		openPaymentDialog,
+		closePaymentDialog,
+		confirmPayment,
+	} = useInvoicesWidgetController(invoices);
 
 	return (
-		<>
-			<CardContent className="flex flex-col gap-4 px-0">
-				{items.length === 0 ? (
-					<WidgetEmptyState
-						icon={<RiBillLine className="size-6 text-muted-foreground" />}
-						title="Nenhuma fatura para o período selecionado"
-						description="Quando houver cartões com compras registradas, eles aparecerão aqui."
-					/>
-				) : (
-					<ul className="flex flex-col">
-						{items.map((invoice) => {
-							const logo = resolveLogoPath(invoice.logo);
-							const initials = buildInitials(invoice.cardName);
-							const dueInfo = parseDueDate(invoice.period, invoice.dueDay);
-							const isPaid =
-								invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID;
-							const isOverdue =
-								!isPaid && dueInfo.date !== null && dueInfo.date < new Date();
-							const paymentInfo = formatPaymentDate(invoice.paidAt);
-
-							return (
-								<li
-									key={invoice.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.5 shrink-0 items-center justify-center overflow-hidden rounded-full">
-											{logo ? (
-												<Image
-													src={logo}
-													alt={`Logo do cartão ${invoice.cardName}`}
-													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">
-											{(() => {
-												const breakdown = invoice.pagadorBreakdown ?? [];
-												const hasBreakdown = breakdown.length > 0;
-												const linkNode = (
-													<Link
-														prefetch
-														href={`/cartoes/${
-															invoice.cardId
-														}/fatura?periodo=${formatPeriodForUrl(
-															invoice.period,
-														)}`}
-														className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-													>
-														<span className="truncate">{invoice.cardName}</span>
-														<RiExternalLinkLine
-															className="size-3 shrink-0 text-muted-foreground"
-															aria-hidden
-														/>
-													</Link>
-												);
-
-												if (!hasBreakdown) {
-													return linkNode;
-												}
-
-												const totalForShare = Math.abs(invoice.totalAmount);
-
-												return (
-													<HoverCard openDelay={150}>
-														<HoverCardTrigger asChild>
-															{linkNode}
-														</HoverCardTrigger>
-														<HoverCardContent
-															align="start"
-															className="w-72 space-y-3"
-														>
-															<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-																Distribuição por pagador
-															</p>
-															<ul className="space-y-2">
-																{breakdown.map((share, index) => (
-																	<li
-																		key={`${invoice.id}-${
-																			share.pagadorId ??
-																			share.pagadorName ??
-																			index
-																		}`}
-																		className="flex items-center gap-3"
-																	>
-																		<Avatar className="size-9">
-																			<AvatarImage
-																				src={getAvatarSrc(share.pagadorAvatar)}
-																				alt={`Avatar de ${share.pagadorName}`}
-																			/>
-																			<AvatarFallback>
-																				{buildInitials(share.pagadorName)}
-																			</AvatarFallback>
-																		</Avatar>
-																		<div className="min-w-0 flex-1">
-																			<p className="truncate text-sm font-medium text-foreground">
-																				{share.pagadorName}
-																			</p>
-																			<p className="text-xs text-muted-foreground">
-																				{getShareLabel(
-																					share.amount,
-																					totalForShare,
-																				)}
-																			</p>
-																		</div>
-																		<div className="text-sm font-semibold text-foreground">
-																			<MoneyValues amount={share.amount} />
-																		</div>
-																	</li>
-																))}
-															</ul>
-														</HoverCardContent>
-													</HoverCard>
-												);
-											})()}
-											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-												{!isPaid ? <span>{dueInfo.label}</span> : null}
-												{isPaid && paymentInfo ? (
-													<span className="text-success">
-														{paymentInfo.label}
-													</span>
-												) : null}
-											</div>
-										</div>
-									</div>
-
-									<div className="flex shrink-0 flex-col items-end">
-										<MoneyValues amount={Math.abs(invoice.totalAmount)} />
-										<div className="flex items-center gap-2">
-											<Button
-												type="button"
-												size="sm"
-												disabled={isPaid}
-												onClick={() => handleOpenModal(invoice.id)}
-												variant={"link"}
-												className="p-0 h-auto disabled:opacity-100"
-											>
-												{isPaid ? (
-													<span className="text-success flex items-center gap-1">
-														<RiCheckboxCircleFill className="size-3" /> Pago
-													</span>
-												) : isOverdue ? (
-													<span className="overdue-blink">
-														<span className="overdue-blink-primary text-destructive">
-															Atrasado
-														</span>
-														<span className="overdue-blink-secondary">
-															Pagar
-														</span>
-													</span>
-												) : (
-													<span>Pagar</span>
-												)}
-											</Button>
-										</div>
-									</div>
-								</li>
-							);
-						})}
-					</ul>
-				)}
-			</CardContent>
-
-			<Dialog
-				open={isModalOpen}
-				onOpenChange={(open) => {
-					if (!open) {
-						handleCloseModal();
-						return;
-					}
-					setIsModalOpen(true);
-				}}
-			>
-				<DialogContent
-					className="max-w-[calc(100%-2rem)] sm:max-w-md"
-					onEscapeKeyDown={(event) => {
-						if (modalState === "processing") {
-							event.preventDefault();
-							return;
-						}
-						handleCloseModal();
-					}}
-					onPointerDownOutside={(event) => {
-						if (modalState === "processing") {
-							event.preventDefault();
-						}
-					}}
-				>
-					{modalState === "success" ? (
-						<div className="flex flex-col items-center gap-4 py-6 text-center">
-							<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
-								<RiCheckboxCircleLine className="size-8" />
-							</div>
-							<div className="space-y-2">
-								<DialogTitle className="text-base">
-									Pagamento confirmado!
-								</DialogTitle>
-								<DialogDescription className="text-sm">
-									Atualizamos o status da fatura. O lançamento do pagamento
-									aparecerá no extrato em instantes.
-								</DialogDescription>
-							</div>
-							<ModalFooter className="sm:justify-center">
-								<Button
-									type="button"
-									onClick={handleCloseModal}
-									className="sm:w-auto"
-								>
-									Fechar
-								</Button>
-							</ModalFooter>
-						</div>
-					) : (
-						<>
-							<DialogHeader>
-								<DialogTitle>Confirmar pagamento</DialogTitle>
-								<DialogDescription>
-									Revise os dados antes de confirmar. Vamos registrar a fatura
-									como paga.
-								</DialogDescription>
-							</DialogHeader>
-
-							{selectedInvoice ? (
-								<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 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
-													{selectedLogo ? (
-														<Image
-															src={selectedLogo}
-															alt={`Logo do cartão ${selectedInvoice.cardName}`}
-															width={40}
-															height={40}
-															className="h-full w-full object-contain"
-														/>
-													) : (
-														<span className="text-xs font-semibold uppercase text-primary">
-															{buildInitials(selectedInvoice.cardName)}
-														</span>
-													)}
-												</div>
-												<div>
-													<p className="text-sm font-medium text-muted-foreground">
-														Cartão
-													</p>
-													<p className="text-lg font-bold text-foreground">
-														{selectedInvoice.cardName}
-													</p>
-												</div>
-											</div>
-											<div className="text-right">
-												{selectedInvoice.paymentStatus !==
-												INVOICE_PAYMENT_STATUS.PAID ? (
-													<p className="text-sm text-muted-foreground">
-														{
-															parseDueDate(
-																selectedInvoice.period,
-																selectedInvoice.dueDay,
-															).label
-														}
-													</p>
-												) : null}
-												{selectedInvoice.paymentStatus ===
-													INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
-													<p className="text-sm text-success">
-														{selectedPaymentInfo.label}
-													</p>
-												) : null}
-											</div>
-										</div>
-									</div>
-
-									<div className="grid gap-3 sm:grid-cols-2">
-										<div className="rounded-lg border p-3">
-											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												<RiMoneyDollarCircleLine className="size-4" />
-												<span className="text-xs font-semibold uppercase">
-													Valor da Fatura
-												</span>
-											</div>
-											<MoneyValues
-												amount={Math.abs(selectedInvoice.totalAmount)}
-												className="text-lg font-bold"
-											/>
-										</div>
-										<div className="rounded-lg border p-3">
-											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												<RiCheckboxCircleLine className="size-4" />
-												<span className="text-xs font-semibold uppercase">
-													Status
-												</span>
-											</div>
-											<Badge
-												variant={getStatusBadgeVariant(
-													INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus],
-												)}
-											>
-												{INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
-											</Badge>
-										</div>
-									</div>
-								</div>
-							) : null}
-
-							<ModalFooter className="sm:justify-end">
-								<Button
-									type="button"
-									variant="outline"
-									onClick={handleCloseModal}
-									disabled={modalState === "processing"}
-								>
-									Cancelar
-								</Button>
-								<Button
-									type="button"
-									onClick={handleConfirmPayment}
-									disabled={modalState === "processing" || isPending}
-									className="relative"
-								>
-									{modalState === "processing" || isPending ? (
-										<>
-											<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
-											Processando...
-										</>
-									) : (
-										"Confirmar pagamento"
-									)}
-								</Button>
-							</ModalFooter>
-						</>
-					)}
-				</DialogContent>
-			</Dialog>
-		</>
+		<InvoicesWidgetView
+			invoices={items}
+			selectedInvoice={selectedInvoice}
+			isModalOpen={isModalOpen}
+			modalState={modalState}
+			isPending={isPending}
+			onOpenPaymentDialog={openPaymentDialog}
+			onClosePaymentDialog={closePaymentDialog}
+			onConfirmPayment={confirmPayment}
+		/>
 	);
 }

components/dashboard/invoices/invoice-list-item.tsx

@@ -0,0 +1,148 @@
+import { RiCheckboxCircleFill, RiExternalLinkLine } from "@remixicon/react";
+import Link from "next/link";
+import MoneyValues from "@/components/shared/money-values";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import type { DashboardInvoice } from "@/lib/dashboard/invoices";
+import {
+	buildInvoiceDetailsHref,
+	buildInvoiceInitials,
+	formatInvoicePaymentDate,
+	getInvoiceShareLabel,
+	parseInvoiceDueDate,
+} from "@/lib/dashboard/invoices-helpers";
+import { INVOICE_PAYMENT_STATUS } from "@/lib/faturas";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { isDateOnlyPast } from "@/lib/utils/date";
+import { InvoiceLogo } from "./invoice-logo";
+
+type InvoiceListItemProps = {
+	invoice: DashboardInvoice;
+	onPay: (invoiceId: string) => void;
+};
+
+export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
+	const dueInfo = parseInvoiceDueDate(invoice.period, invoice.dueDay);
+	const isPaid = invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID;
+	const isOverdue =
+		!isPaid && dueInfo.date !== null && isDateOnlyPast(dueInfo.date);
+	const paymentInfo = formatInvoicePaymentDate(invoice.paidAt);
+	const breakdown = invoice.pagadorBreakdown ?? [];
+	const hasBreakdown = breakdown.length > 0;
+	const detailHref = buildInvoiceDetailsHref(invoice.cardId, invoice.period);
+
+	const linkNode = (
+		<Link
+			prefetch
+			href={detailHref}
+			className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+		>
+			<span className="truncate">{invoice.cardName}</span>
+			<RiExternalLinkLine
+				className="size-3 shrink-0 text-muted-foreground"
+				aria-hidden
+			/>
+		</Link>
+	);
+
+	return (
+		<li 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">
+				<InvoiceLogo
+					cardName={invoice.cardName}
+					logo={invoice.logo}
+					size={36}
+					containerClassName="size-9.5"
+				/>
+
+				<div className="min-w-0">
+					{hasBreakdown ? (
+						<HoverCard openDelay={150}>
+							<HoverCardTrigger asChild>{linkNode}</HoverCardTrigger>
+							<HoverCardContent align="start" className="w-72 space-y-3">
+								<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+									Distribuição por pagador
+								</p>
+								<ul className="space-y-2">
+									{breakdown.map((share, index) => (
+										<li
+											key={`${invoice.id}-${
+												share.pagadorId ?? share.pagadorName ?? index
+											}`}
+											className="flex items-center gap-3"
+										>
+											<Avatar className="size-9">
+												<AvatarImage
+													src={getAvatarSrc(share.pagadorAvatar)}
+													alt={`Avatar de ${share.pagadorName}`}
+												/>
+												<AvatarFallback>
+													{buildInvoiceInitials(share.pagadorName)}
+												</AvatarFallback>
+											</Avatar>
+											<div className="min-w-0 flex-1">
+												<p className="truncate text-sm font-medium text-foreground">
+													{share.pagadorName}
+												</p>
+												<p className="text-xs text-muted-foreground">
+													{getInvoiceShareLabel(
+														share.amount,
+														Math.abs(invoice.totalAmount),
+													)}
+												</p>
+											</div>
+											<div className="text-sm font-semibold text-foreground">
+												<MoneyValues amount={share.amount} />
+											</div>
+										</li>
+									))}
+								</ul>
+							</HoverCardContent>
+						</HoverCard>
+					) : (
+						linkNode
+					)}
+
+					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+						{!isPaid ? <span>{dueInfo.label}</span> : null}
+						{isPaid && paymentInfo ? (
+							<span className="text-success">{paymentInfo.label}</span>
+						) : null}
+					</div>
+				</div>
+			</div>
+
+			<div className="flex shrink-0 flex-col items-end">
+				<MoneyValues amount={Math.abs(invoice.totalAmount)} />
+				<Button
+					type="button"
+					size="sm"
+					variant="link"
+					className="h-auto p-0 disabled:opacity-100"
+					disabled={isPaid}
+					onClick={() => onPay(invoice.id)}
+				>
+					{isPaid ? (
+						<span className="flex items-center gap-1 text-success">
+							<RiCheckboxCircleFill className="size-3" /> Pago
+						</span>
+					) : isOverdue ? (
+						<span className="overdue-blink">
+							<span className="overdue-blink-primary text-destructive">
+								Atrasado
+							</span>
+							<span className="overdue-blink-secondary">Pagar</span>
+						</span>
+					) : (
+						<span>Pagar</span>
+					)}
+				</Button>
+			</div>
+		</li>
+	);
+}

components/dashboard/invoices/invoice-logo.tsx

@@ -0,0 +1,59 @@
+import Image from "next/image";
+import {
+	buildInvoiceInitials,
+	type InvoiceLogoTone,
+} from "@/lib/dashboard/invoices-helpers";
+import { resolveLogoSrc } from "@/lib/logo";
+import { cn } from "@/lib/utils/ui";
+
+type InvoiceLogoProps = {
+	cardName: string;
+	logo: string | null;
+	size: number;
+	containerClassName?: string;
+	imageClassName?: string;
+	fallbackClassName?: string;
+	tone?: InvoiceLogoTone;
+};
+
+export function InvoiceLogo({
+	cardName,
+	logo,
+	size,
+	containerClassName,
+	imageClassName,
+	fallbackClassName,
+	tone = "muted",
+}: InvoiceLogoProps) {
+	const resolvedLogo = resolveLogoSrc(logo);
+
+	return (
+		<div
+			className={cn(
+				"flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+				tone === "accent" && "bg-primary/10",
+				containerClassName,
+			)}
+		>
+			{resolvedLogo ? (
+				<Image
+					src={resolvedLogo}
+					alt={`Logo do cartão ${cardName}`}
+					width={size}
+					height={size}
+					className={cn("h-full w-full object-contain", imageClassName)}
+				/>
+			) : (
+				<span
+					className={cn(
+						"text-sm font-semibold uppercase text-muted-foreground",
+						tone === "accent" && "text-primary",
+						fallbackClassName,
+					)}
+				>
+					{buildInvoiceInitials(cardName)}
+				</span>
+			)}
+		</div>
+	);
+}

components/dashboard/invoices/invoice-payment-dialog.tsx

@@ -0,0 +1,203 @@
+import {
+	RiCheckboxCircleLine,
+	RiLoader4Line,
+	RiMoneyDollarCircleLine,
+} from "@remixicon/react";
+import MoneyValues from "@/components/shared/money-values";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import type { DashboardInvoice } from "@/lib/dashboard/invoices";
+import {
+	formatInvoicePaymentDate,
+	getInvoiceStatusBadgeVariant,
+	type InvoiceDialogState,
+	parseInvoiceDueDate,
+} from "@/lib/dashboard/invoices-helpers";
+import { INVOICE_PAYMENT_STATUS, INVOICE_STATUS_LABEL } from "@/lib/faturas";
+import { InvoiceLogo } from "./invoice-logo";
+
+type InvoicePaymentDialogProps = {
+	invoice: DashboardInvoice | null;
+	open: boolean;
+	modalState: InvoiceDialogState;
+	isPending: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
+
+export function InvoicePaymentDialog({
+	invoice,
+	open,
+	modalState,
+	isPending,
+	onClose,
+	onConfirm,
+}: InvoicePaymentDialogProps) {
+	const isProcessing = modalState === "processing" || isPending;
+	const paymentInfo = invoice ? formatInvoicePaymentDate(invoice.paidAt) : null;
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(nextOpen) => {
+				if (nextOpen || isProcessing) {
+					return;
+				}
+				onClose();
+			}}
+		>
+			<DialogContent
+				className="max-w-[calc(100%-2rem)] sm:max-w-md"
+				onEscapeKeyDown={(event) => {
+					if (isProcessing) {
+						event.preventDefault();
+					}
+				}}
+				onPointerDownOutside={(event) => {
+					if (isProcessing) {
+						event.preventDefault();
+					}
+				}}
+			>
+				{modalState === "success" ? (
+					<div className="flex flex-col items-center gap-4 py-6 text-center">
+						<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
+							<RiCheckboxCircleLine className="size-8" />
+						</div>
+						<div className="space-y-2">
+							<DialogTitle className="text-base">
+								Pagamento confirmado!
+							</DialogTitle>
+							<DialogDescription className="text-sm">
+								Atualizamos o status da fatura. O lançamento do pagamento
+								aparecerá no extrato em instantes.
+							</DialogDescription>
+						</div>
+						<DialogFooter className="sm:justify-center">
+							<Button type="button" onClick={onClose} className="sm:w-auto">
+								Fechar
+							</Button>
+						</DialogFooter>
+					</div>
+				) : (
+					<>
+						<DialogHeader>
+							<DialogTitle>Confirmar pagamento</DialogTitle>
+							<DialogDescription>
+								Revise os dados antes de confirmar. Vamos registrar a fatura
+								como paga.
+							</DialogDescription>
+						</DialogHeader>
+
+						{invoice ? (
+							<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">
+											<InvoiceLogo
+												cardName={invoice.cardName}
+												logo={invoice.logo}
+												size={40}
+												tone="accent"
+												containerClassName="size-10"
+												fallbackClassName="text-xs"
+											/>
+											<div>
+												<p className="text-sm font-medium text-muted-foreground">
+													Cartão
+												</p>
+												<p className="text-lg font-bold text-foreground">
+													{invoice.cardName}
+												</p>
+											</div>
+										</div>
+										<div className="text-right">
+											{invoice.paymentStatus !== INVOICE_PAYMENT_STATUS.PAID ? (
+												<p className="text-sm text-muted-foreground">
+													{
+														parseInvoiceDueDate(invoice.period, invoice.dueDay)
+															.label
+													}
+												</p>
+											) : null}
+											{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID &&
+											paymentInfo ? (
+												<p className="text-sm text-success">
+													{paymentInfo.label}
+												</p>
+											) : null}
+										</div>
+									</div>
+								</div>
+
+								<div className="grid gap-3 sm:grid-cols-2">
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+											<RiMoneyDollarCircleLine className="size-4" />
+											<span className="text-xs font-semibold uppercase">
+												Valor da Fatura
+											</span>
+										</div>
+										<MoneyValues
+											amount={Math.abs(invoice.totalAmount)}
+											className="text-lg font-bold"
+										/>
+									</div>
+									<div className="rounded-lg border p-3">
+										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
+											<RiCheckboxCircleLine className="size-4" />
+											<span className="text-xs font-semibold uppercase">
+												Status
+											</span>
+										</div>
+										<Badge
+											variant={getInvoiceStatusBadgeVariant(
+												INVOICE_STATUS_LABEL[invoice.paymentStatus],
+											)}
+										>
+											{INVOICE_STATUS_LABEL[invoice.paymentStatus]}
+										</Badge>
+									</div>
+								</div>
+							</div>
+						) : null}
+
+						<DialogFooter className="sm:justify-end">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={onClose}
+								disabled={isProcessing}
+							>
+								Cancelar
+							</Button>
+							<Button
+								type="button"
+								onClick={onConfirm}
+								disabled={isProcessing || !invoice}
+								className="relative"
+							>
+								{isProcessing ? (
+									<>
+										<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
+										Processando...
+									</>
+								) : (
+									"Confirmar pagamento"
+								)}
+							</Button>
+						</DialogFooter>
+					</>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+}

components/dashboard/invoices/invoices-list.tsx

@@ -0,0 +1,29 @@
+import { RiBillLine } from "@remixicon/react";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { DashboardInvoice } from "@/lib/dashboard/invoices";
+import { InvoiceListItem } from "./invoice-list-item";
+
+type InvoicesListProps = {
+	invoices: DashboardInvoice[];
+	onPay: (invoiceId: string) => void;
+};
+
+export function InvoicesList({ invoices, onPay }: InvoicesListProps) {
+	if (invoices.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiBillLine className="size-6 text-muted-foreground" />}
+				title="Nenhuma fatura para o período selecionado"
+				description="Quando houver cartões com compras registradas, eles aparecerão aqui."
+			/>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col">
+			{invoices.map((invoice) => (
+				<InvoiceListItem key={invoice.id} invoice={invoice} onPay={onPay} />
+			))}
+		</ul>
+	);
+}

components/dashboard/invoices/invoices-widget-view.tsx

@@ -0,0 +1,43 @@
+import type { DashboardInvoice } from "@/lib/dashboard/invoices";
+import type { InvoiceDialogState } from "@/lib/dashboard/invoices-helpers";
+import { InvoicePaymentDialog } from "./invoice-payment-dialog";
+import { InvoicesList } from "./invoices-list";
+
+type InvoicesWidgetViewProps = {
+	invoices: DashboardInvoice[];
+	selectedInvoice: DashboardInvoice | null;
+	isModalOpen: boolean;
+	modalState: InvoiceDialogState;
+	isPending: boolean;
+	onOpenPaymentDialog: (invoiceId: string) => void;
+	onClosePaymentDialog: () => void;
+	onConfirmPayment: () => void;
+};
+
+export function InvoicesWidgetView({
+	invoices,
+	selectedInvoice,
+	isModalOpen,
+	modalState,
+	isPending,
+	onOpenPaymentDialog,
+	onClosePaymentDialog,
+	onConfirmPayment,
+}: InvoicesWidgetViewProps) {
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<InvoicesList invoices={invoices} onPay={onOpenPaymentDialog} />
+			</div>
+
+			<InvoicePaymentDialog
+				invoice={selectedInvoice}
+				open={isModalOpen}
+				modalState={modalState}
+				isPending={isPending}
+				onClose={onClosePaymentDialog}
+				onConfirm={onConfirmPayment}
+			/>
+		</>
+	);
+}

components/dashboard/my-accounts-widget.tsx

@@ -1,62 +1,38 @@
 import { RiBarChartBoxLine, RiExternalLinkLine } from "@remixicon/react";
 import Image from "next/image";
 import Link from "next/link";
-import {
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-} from "@/components/ui/card";
+import { CardFooter } from "@/components/ui/card";
 import type { DashboardAccount } from "@/lib/dashboard/accounts";
+import { resolveLogoSrc } from "@/lib/logo";
 import { formatPeriodForUrl } from "@/lib/utils/period";
-import MoneyValues from "../money-values";
-import { WidgetEmptyState } from "../widget-empty-state";
+import MoneyValues from "@/components/shared/money-values";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 
 type MyAccountsWidgetProps = {
 	accounts: DashboardAccount[];
 	totalBalance: number;
-	maxVisible?: number;
 	period: string;
 };
 
-const resolveLogoSrc = (logo: string | null) => {
-	if (!logo) {
-		return null;
-	}
-
-	const fileName = logo.split("/").filter(Boolean).pop() ?? logo;
-	return `/logos/${fileName}`;
-};
-
-const buildInitials = (name: string) => {
-	const parts = name.trim().split(/\s+/).filter(Boolean);
-	if (parts.length === 0) return "CC";
-	if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-	return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
-};
-
 export function MyAccountsWidget({
 	accounts,
 	totalBalance,
-	maxVisible = 5,
 	period,
 }: MyAccountsWidgetProps) {
 	const visibleAccounts = accounts.filter(
 		(account) => !account.excludeFromBalance,
 	);
-	const displayedAccounts = visibleAccounts.slice(0, maxVisible);
+	const displayedAccounts = visibleAccounts.slice(0, 5);
 	const remainingCount = visibleAccounts.length - displayedAccounts.length;
 
 	return (
 		<>
-			<CardHeader className="pb-4 px-0">
-				<CardDescription>Saldo Total</CardDescription>
-				<div className="text-2xl text-foreground">
-					<MoneyValues amount={totalBalance} />
-				</div>
-			</CardHeader>
+			<div className="flex justify-between py-2">
+				Saldo Total
+				<MoneyValues className="text-2xl" amount={totalBalance} />
+			</div>
 
-			<CardContent className="py-2 px-0">
+			<div className="py-2 px-0">
 				{displayedAccounts.length === 0 ? (
 					<div className="-mt-10">
 						<WidgetEmptyState
@@ -71,7 +47,6 @@ export function MyAccountsWidget({
 					<ul className="flex flex-col">
 						{displayedAccounts.map((account) => {
 							const logoSrc = resolveLogoSrc(account.logo);
-							const initials = buildInitials(account.name);
 
 							return (
 								<li
@@ -79,20 +54,14 @@ export function MyAccountsWidget({
 									className="flex items-center justify-between gap-2 border-b border-dashed py-2 last:border-0"
 								>
 									<div className="flex min-w-0 flex-1 items-center gap-3">
-										{logoSrc ? (
-											<div className="relative size-10 overflow-hidden">
-												<Image
-													src={logoSrc}
-													alt={`Logo da conta ${account.name}`}
-													fill
-													className="object-contain rounded-full"
-												/>
-											</div>
-										) : (
-											<div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-sm font-semibold uppercase text-secondary-foreground">
-												{initials}
-											</div>
-										)}
+										<div className="relative size-10 overflow-hidden">
+											<Image
+												src={logoSrc}
+												alt={`Logo da conta ${account.name}`}
+												fill
+												className="object-contain rounded-full"
+											/>
+										</div>
 
 										<div className="min-w-0">
 											<Link
@@ -122,7 +91,7 @@ export function MyAccountsWidget({
 						})}
 					</ul>
 				)}
-			</CardContent>
+			</div>
 
 			{visibleAccounts.length > displayedAccounts.length ? (
 				<CardFooter className="border-border/60 border-t pt-4 text-sm text-muted-foreground">

components/dashboard/notes-widget.tsx

@@ -1,154 +1,37 @@
 "use client";
 
-import { RiFileList2Line, RiPencilLine, RiTodoLine } from "@remixicon/react";
-import { useCallback, useMemo, useState } from "react";
-import { NoteDetailsDialog } from "@/components/anotacoes/note-details-dialog";
-import { NoteDialog } from "@/components/anotacoes/note-dialog";
-import type { Note } from "@/components/anotacoes/types";
-import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
 import type { DashboardNote } from "@/lib/dashboard/notes";
-import { Badge } from "../ui/badge";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { useNotesWidgetController } from "@/lib/dashboard/use-notes-widget-controller";
+import { NotesWidgetView } from "./notes/notes-widget-view";
 
 type NotesWidgetProps = {
 	notes: DashboardNote[];
 };
 
-const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-	timeZone: "UTC",
-});
-
-const buildDisplayTitle = (value: string) => {
-	const trimmed = value.trim();
-	return trimmed.length ? trimmed : "Anotação sem título";
-};
-
-const mapDashboardNoteToNote = (note: DashboardNote): Note => ({
-	id: note.id,
-	title: note.title,
-	description: note.description,
-	type: note.type,
-	tasks: note.tasks,
-	arquivada: note.arquivada,
-	createdAt: note.createdAt,
-});
-
-const getTasksSummary = (note: DashboardNote) => {
-	if (note.type !== "tarefa") {
-		return "Nota";
-	}
-
-	const tasks = note.tasks ?? [];
-	const completed = tasks.filter((task) => task.completed).length;
-	return `${completed}/${tasks.length} concluídas`;
-};
-
 export function NotesWidget({ notes }: NotesWidgetProps) {
-	const [noteToEdit, setNoteToEdit] = useState<Note | null>(null);
-	const [isEditOpen, setIsEditOpen] = useState(false);
-	const [noteDetails, setNoteDetails] = useState<Note | null>(null);
-	const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-
-	const mappedNotes = useMemo(() => notes.map(mapDashboardNoteToNote), [notes]);
-
-	const handleOpenEdit = useCallback((note: Note) => {
-		setNoteToEdit(note);
-		setIsEditOpen(true);
-	}, []);
-
-	const handleOpenDetails = useCallback((note: Note) => {
-		setNoteDetails(note);
-		setIsDetailsOpen(true);
-	}, []);
-
-	const handleEditOpenChange = useCallback((open: boolean) => {
-		setIsEditOpen(open);
-		if (!open) {
-			setNoteToEdit(null);
-		}
-	}, []);
-
-	const handleDetailsOpenChange = useCallback((open: boolean) => {
-		setIsDetailsOpen(open);
-		if (!open) {
-			setNoteDetails(null);
-		}
-	}, []);
+	const {
+		mappedNotes,
+		noteToEdit,
+		isEditOpen,
+		noteDetails,
+		isDetailsOpen,
+		openEdit,
+		openDetails,
+		handleEditOpenChange,
+		handleDetailsOpenChange,
+	} = useNotesWidgetController(notes);
 
 	return (
-		<>
-			<CardContent className="flex flex-col gap-4 px-0">
-				{mappedNotes.length === 0 ? (
-					<WidgetEmptyState
-						icon={<RiTodoLine className="size-6 text-muted-foreground" />}
-						title="Nenhuma anotação ativa"
-						description="Crie anotações para acompanhar lembretes e tarefas financeiras."
-					/>
-				) : (
-					<ul className="flex flex-col">
-						{mappedNotes.map((note) => (
-							<li
-								key={note.id}
-								className="flex items-center justify-between gap-2 border-b border-dashed py-2 last:border-b-0 last:pb-0"
-							>
-								<div className="min-w-0 flex-1">
-									<p className="truncate text-sm font-medium text-foreground">
-										{buildDisplayTitle(note.title)}
-									</p>
-									<div className="mt-1 flex items-center gap-2">
-										<Badge variant="outline" className="h-5 px-1.5 text-[10px]">
-											{getTasksSummary(note)}
-										</Badge>
-										<p className="truncate text-[11px] text-muted-foreground">
-											{DATE_FORMATTER.format(new Date(note.createdAt))}
-										</p>
-									</div>
-								</div>
-
-								<div className="flex shrink-0 items-center">
-									<Button
-										variant="ghost"
-										size="icon-sm"
-										className="text-muted-foreground hover:text-foreground"
-										onClick={() => handleOpenEdit(note)}
-										aria-label={`Editar anotação ${buildDisplayTitle(note.title)}`}
-									>
-										<RiPencilLine className="size-4" />
-									</Button>
-									<Button
-										variant="ghost"
-										size="icon-sm"
-										className="text-muted-foreground hover:text-foreground"
-										onClick={() => handleOpenDetails(note)}
-										aria-label={`Ver detalhes da anotação ${buildDisplayTitle(
-											note.title,
-										)}`}
-									>
-										<RiFileList2Line className="size-4" />
-									</Button>
-								</div>
-							</li>
-						))}
-					</ul>
-				)}
-			</CardContent>
-
-			<NoteDialog
-				mode="update"
-				note={noteToEdit ?? undefined}
-				open={isEditOpen}
-				onOpenChange={handleEditOpenChange}
-			/>
-
-			<NoteDetailsDialog
-				note={noteDetails}
-				open={isDetailsOpen}
-				onOpenChange={handleDetailsOpenChange}
-			/>
-		</>
+		<NotesWidgetView
+			notes={mappedNotes}
+			noteToEdit={noteToEdit}
+			isEditOpen={isEditOpen}
+			noteDetails={noteDetails}
+			isDetailsOpen={isDetailsOpen}
+			onOpenEdit={openEdit}
+			onOpenDetails={openDetails}
+			onEditOpenChange={handleEditOpenChange}
+			onDetailsOpenChange={handleDetailsOpenChange}
+		/>
 	);
 }

components/dashboard/notes/note-list-item.tsx

@@ -0,0 +1,65 @@
+import { RiFileList2Line, RiPencilLine } from "@remixicon/react";
+import type { Note } from "@/components/anotacoes/types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	buildNoteDisplayTitle,
+	formatNoteCreatedAt,
+	getNoteTasksSummary,
+} from "@/lib/notes/formatters";
+
+type NoteListItemProps = {
+	note: Note;
+	onOpenEdit: (note: Note) => void;
+	onOpenDetails: (note: Note) => void;
+};
+
+export function NoteListItem({
+	note,
+	onOpenEdit,
+	onOpenDetails,
+}: NoteListItemProps) {
+	const displayTitle = buildNoteDisplayTitle(note.title);
+	const createdAtLabel = formatNoteCreatedAt(note.createdAt);
+
+	return (
+		<li className="flex items-center justify-between gap-2 border-b border-dashed py-2 last:border-b-0 last:pb-0">
+			<div className="min-w-0 flex-1">
+				<p className="truncate text-sm font-medium text-foreground">
+					{displayTitle}
+				</p>
+				<div className="mt-1 flex items-center gap-2">
+					<Badge variant="outline" className="h-5 px-1.5 text-[10px]">
+						{getNoteTasksSummary(note)}
+					</Badge>
+					{createdAtLabel ? (
+						<p className="truncate text-[11px] text-muted-foreground">
+							{createdAtLabel}
+						</p>
+					) : null}
+				</div>
+			</div>
+
+			<div className="flex shrink-0 items-center">
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					className="text-muted-foreground hover:text-foreground"
+					onClick={() => onOpenEdit(note)}
+					aria-label={`Editar anotação ${displayTitle}`}
+				>
+					<RiPencilLine className="size-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					className="text-muted-foreground hover:text-foreground"
+					onClick={() => onOpenDetails(note)}
+					aria-label={`Ver detalhes da anotação ${displayTitle}`}
+				>
+					<RiFileList2Line className="size-4" />
+				</Button>
+			</div>
+		</li>
+	);
+}

components/dashboard/notes/notes-list.tsx

@@ -0,0 +1,39 @@
+import { RiTodoLine } from "@remixicon/react";
+import type { Note } from "@/components/anotacoes/types";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import { NoteListItem } from "./note-list-item";
+
+type NotesListProps = {
+	notes: Note[];
+	onOpenEdit: (note: Note) => void;
+	onOpenDetails: (note: Note) => void;
+};
+
+export function NotesList({
+	notes,
+	onOpenEdit,
+	onOpenDetails,
+}: NotesListProps) {
+	if (notes.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiTodoLine className="size-6 text-muted-foreground" />}
+				title="Nenhuma anotação ativa"
+				description="Crie anotações para acompanhar lembretes e tarefas financeiras."
+			/>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col">
+			{notes.map((note) => (
+				<NoteListItem
+					key={note.id}
+					note={note}
+					onOpenEdit={onOpenEdit}
+					onOpenDetails={onOpenDetails}
+				/>
+			))}
+		</ul>
+	);
+}

components/dashboard/notes/notes-widget-dialogs.tsx

@@ -0,0 +1,38 @@
+import { NoteDetailsDialog } from "@/components/anotacoes/note-details-dialog";
+import { NoteDialog } from "@/components/anotacoes/note-dialog";
+import type { Note } from "@/components/anotacoes/types";
+
+type NotesWidgetDialogsProps = {
+	noteToEdit: Note | null;
+	isEditOpen: boolean;
+	noteDetails: Note | null;
+	isDetailsOpen: boolean;
+	onEditOpenChange: (open: boolean) => void;
+	onDetailsOpenChange: (open: boolean) => void;
+};
+
+export function NotesWidgetDialogs({
+	noteToEdit,
+	isEditOpen,
+	noteDetails,
+	isDetailsOpen,
+	onEditOpenChange,
+	onDetailsOpenChange,
+}: NotesWidgetDialogsProps) {
+	return (
+		<>
+			<NoteDialog
+				mode="update"
+				note={noteToEdit ?? undefined}
+				open={isEditOpen}
+				onOpenChange={onEditOpenChange}
+			/>
+
+			<NoteDetailsDialog
+				note={noteDetails}
+				open={isDetailsOpen}
+				onOpenChange={onDetailsOpenChange}
+			/>
+		</>
+	);
+}

components/dashboard/notes/notes-widget-view.tsx

@@ -0,0 +1,48 @@
+import type { Note } from "@/components/anotacoes/types";
+import { NotesList } from "./notes-list";
+import { NotesWidgetDialogs } from "./notes-widget-dialogs";
+
+type NotesWidgetViewProps = {
+	notes: Note[];
+	noteToEdit: Note | null;
+	isEditOpen: boolean;
+	noteDetails: Note | null;
+	isDetailsOpen: boolean;
+	onOpenEdit: (note: Note) => void;
+	onOpenDetails: (note: Note) => void;
+	onEditOpenChange: (open: boolean) => void;
+	onDetailsOpenChange: (open: boolean) => void;
+};
+
+export function NotesWidgetView({
+	notes,
+	noteToEdit,
+	isEditOpen,
+	noteDetails,
+	isDetailsOpen,
+	onOpenEdit,
+	onOpenDetails,
+	onEditOpenChange,
+	onDetailsOpenChange,
+}: NotesWidgetViewProps) {
+	return (
+		<>
+			<div className="flex flex-col gap-4 px-0">
+				<NotesList
+					notes={notes}
+					onOpenEdit={onOpenEdit}
+					onOpenDetails={onOpenDetails}
+				/>
+			</div>
+
+			<NotesWidgetDialogs
+				noteToEdit={noteToEdit}
+				isEditOpen={isEditOpen}
+				noteDetails={noteDetails}
+				isDetailsOpen={isDetailsOpen}
+				onEditOpenChange={onEditOpenChange}
+				onDetailsOpenChange={onDetailsOpenChange}
+			/>
+		</>
+	);
+}

components/dashboard/payers-widget.tsx

@@ -8,21 +8,18 @@ import {
 	RiVerifiedBadgeFill,
 } from "@remixicon/react";
 import Link from "next/link";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { CardContent } from "@/components/ui/card";
 import type { DashboardPagador } from "@/lib/dashboard/pagadores";
 import { getAvatarSrc } from "@/lib/pagadores/utils";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { formatPercentage } from "@/lib/utils/percentage";
 
-type PagadoresWidgetProps = {
+type PayersWidgetProps = {
 	pagadores: DashboardPagador[];
 };
 
-const formatPercentage = (value: number) => {
-	return `${Math.abs(value).toFixed(0)}%`;
-};
-
 const buildInitials = (value: string) => {
 	const parts = value.trim().split(/\s+/).filter(Boolean);
 	if (parts.length === 0) {
@@ -37,7 +34,7 @@ const buildInitials = (value: string) => {
 	return `${firstChar}${secondChar}`.toUpperCase() || "??";
 };
 
-export function PagadoresWidget({ pagadores }: PagadoresWidgetProps) {
+export function PayersWidget({ pagadores }: PayersWidgetProps) {
 	return (
 		<CardContent className="flex flex-col gap-4 px-0">
 			{pagadores.length === 0 ? (

components/dashboard/payment-conditions-widget.tsx

@@ -1,88 +0,0 @@
-import {
-	RiCheckLine,
-	RiLoader2Fill,
-	RiRefreshLine,
-	RiSlideshowLine,
-} from "@remixicon/react";
-import type { ReactNode } from "react";
-import MoneyValues from "@/components/money-values";
-import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
-import { Progress } from "../ui/progress";
-import { WidgetEmptyState } from "../widget-empty-state";
-
-type PaymentConditionsWidgetProps = {
-	data: PaymentConditionsData;
-};
-
-const CONDITION_ICON_CLASSES =
-	"flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground";
-
-const CONDITION_ICONS: Record<string, ReactNode> = {
-	"À vista": <RiCheckLine className="size-5" aria-hidden />,
-	Parcelado: <RiLoader2Fill className="size-5" aria-hidden />,
-	Recorrente: <RiRefreshLine className="size-5" aria-hidden />,
-};
-
-const formatPercentage = (value: number) =>
-	new Intl.NumberFormat("pt-BR", {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 1,
-	}).format(value);
-
-export function PaymentConditionsWidget({
-	data,
-}: PaymentConditionsWidgetProps) {
-	if (data.conditions.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={<RiSlideshowLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa encontrada"
-				description="As distribuições por condição aparecerão conforme novos lançamentos."
-			/>
-		);
-	}
-
-	return (
-		<div className="flex flex-col gap-4 px-0">
-			<ul className="flex flex-col gap-2">
-				{data.conditions.map((condition) => {
-					const Icon =
-						CONDITION_ICONS[condition.condition] ?? CONDITION_ICONS["À vista"];
-					const percentageLabel = formatPercentage(condition.percentage);
-
-					return (
-						<li
-							key={condition.condition}
-							className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
-						>
-							<div className={CONDITION_ICON_CLASSES}>{Icon}</div>
-
-							<div className="min-w-0 flex-1">
-								<div className="flex items-center justify-between">
-									<p className="font-medium text-foreground text-sm">
-										{condition.condition}
-									</p>
-									<MoneyValues amount={condition.amount} />
-								</div>
-
-								<div className="flex items-center justify-between text-xs text-muted-foreground">
-									<span>
-										{condition.transactions}{" "}
-										{condition.transactions === 1
-											? "lançamento"
-											: "lançamentos"}
-									</span>
-									<span>{percentageLabel}%</span>
-								</div>
-
-								<div className="mt-1">
-									<Progress value={condition.percentage} />
-								</div>
-							</div>
-						</li>
-					);
-				})}
-			</ul>
-		</div>
-	);
-}

components/dashboard/payment-methods-widget.tsx

@@ -1,87 +0,0 @@
-import { RiBankCard2Line, RiMoneyDollarCircleLine } from "@remixicon/react";
-import MoneyValues from "@/components/money-values";
-import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
-import { getPaymentMethodIcon } from "@/lib/utils/icons";
-import { Progress } from "../ui/progress";
-import { WidgetEmptyState } from "../widget-empty-state";
-
-type PaymentMethodsWidgetProps = {
-	data: PaymentMethodsData;
-};
-
-const ICON_WRAPPER_CLASS =
-	"flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground";
-
-const formatPercentage = (value: number) =>
-	new Intl.NumberFormat("pt-BR", {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 1,
-	}).format(value);
-
-const resolveIcon = (paymentMethod: string | null | undefined) => {
-	if (!paymentMethod) {
-		return <RiMoneyDollarCircleLine className="size-5" aria-hidden />;
-	}
-
-	const icon = getPaymentMethodIcon(paymentMethod);
-	if (icon) {
-		return icon;
-	}
-
-	return <RiBankCard2Line className="size-5" aria-hidden />;
-};
-
-export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
-	if (data.methods.length === 0) {
-		return (
-			<WidgetEmptyState
-				icon={
-					<RiMoneyDollarCircleLine className="size-6 text-muted-foreground" />
-				}
-				title="Nenhuma despesa encontrada"
-				description="Cadastre despesas para visualizar a distribuição por forma de pagamento."
-			/>
-		);
-	}
-
-	return (
-		<div className="flex flex-col gap-4 px-0">
-			<ul className="flex flex-col gap-2">
-				{data.methods.map((method) => {
-					const icon = resolveIcon(method.paymentMethod);
-					const percentageLabel = formatPercentage(method.percentage);
-
-					return (
-						<li
-							key={method.paymentMethod}
-							className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0"
-						>
-							<div className={ICON_WRAPPER_CLASS}>{icon}</div>
-
-							<div className="min-w-0 flex-1">
-								<div className="flex items-center justify-between">
-									<p className="font-medium text-foreground text-sm">
-										{method.paymentMethod}
-									</p>
-									<MoneyValues amount={method.amount} />
-								</div>
-
-								<div className="flex items-center justify-between text-xs text-muted-foreground">
-									<span>
-										{method.transactions}{" "}
-										{method.transactions === 1 ? "lançamento" : "lançamentos"}
-									</span>
-									<span>{percentageLabel}%</span>
-								</div>
-
-								<div className="mt-1">
-									<Progress value={method.percentage} />
-								</div>
-							</div>
-						</li>
-					);
-				})}
-			</ul>
-		</div>
-	);
-}

components/dashboard/payment-overview-widget.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { RiMoneyDollarCircleLine, RiSlideshowLine } from "@remixicon/react";
-import { useState } from "react";
 import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
 import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { PaymentConditionsWidget } from "./payment-conditions-widget";
-import { PaymentMethodsWidget } from "./payment-methods-widget";
+import { usePaymentOverviewWidgetController } from "@/lib/dashboard/use-payment-overview-widget-controller";
+import { PaymentOverviewWidgetView } from "./payment-overview/payment-overview-widget-view";
 
 type PaymentOverviewWidgetProps = {
 	paymentConditionsData: PaymentConditionsData;
@@ -17,34 +14,14 @@ export function PaymentOverviewWidget({
 	paymentConditionsData,
 	paymentMethodsData,
 }: PaymentOverviewWidgetProps) {
-	const [activeTab, setActiveTab] = useState<"conditions" | "methods">(
-		"conditions",
-	);
+	const { activeTab, handleTabChange } = usePaymentOverviewWidgetController();
 
 	return (
-		<Tabs
-			value={activeTab}
-			onValueChange={(value) => setActiveTab(value as "conditions" | "methods")}
-			className="w-full"
-		>
-			<TabsList className="grid grid-cols-2">
-				<TabsTrigger value="conditions" className="text-xs">
-					<RiSlideshowLine className="mr-1 size-3.5" />
-					Condições
-				</TabsTrigger>
-				<TabsTrigger value="methods" className="text-xs">
-					<RiMoneyDollarCircleLine className="mr-1 size-3.5" />
-					Formas
-				</TabsTrigger>
-			</TabsList>
-
-			<TabsContent value="conditions" className="mt-2">
-				<PaymentConditionsWidget data={paymentConditionsData} />
-			</TabsContent>
-
-			<TabsContent value="methods" className="mt-2">
-				<PaymentMethodsWidget data={paymentMethodsData} />
-			</TabsContent>
-		</Tabs>
+		<PaymentOverviewWidgetView
+			activeTab={activeTab}
+			paymentConditionsData={paymentConditionsData}
+			paymentMethodsData={paymentMethodsData}
+			onTabChange={handleTabChange}
+		/>
 	);
 }

components/dashboard/payment-overview/payment-breakdown-list-item.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import MoneyValues from "@/components/shared/money-values";
+import { Progress } from "@/components/ui/progress";
+import {
+	formatPaymentBreakdownPercentage,
+	formatPaymentBreakdownTransactionsLabel,
+} from "@/lib/dashboard/payment-breakdown-formatters";
+
+const ICON_WRAPPER_CLASS =
+	"flex size-9.5 shrink-0 items-center justify-center rounded-full bg-muted text-foreground";
+
+export type PaymentBreakdownListItemData = {
+	id: string;
+	title: string;
+	icon: ReactNode;
+	amount: number;
+	transactions: number;
+	percentage: number;
+};
+
+type PaymentBreakdownListItemProps = {
+	item: PaymentBreakdownListItemData;
+};
+
+export function PaymentBreakdownListItem({
+	item,
+}: PaymentBreakdownListItemProps) {
+	return (
+		<li className="flex items-center gap-3 border-b border-dashed pb-3 last:border-b-0 last:pb-0">
+			<div className={ICON_WRAPPER_CLASS}>{item.icon}</div>
+
+			<div className="min-w-0 flex-1">
+				<div className="flex items-center justify-between">
+					<p className="text-sm font-medium text-foreground">{item.title}</p>
+					<MoneyValues amount={item.amount} />
+				</div>
+
+				<div className="flex items-center justify-between text-xs text-muted-foreground">
+					<span>
+						{formatPaymentBreakdownTransactionsLabel(item.transactions)}
+					</span>
+					<span>{formatPaymentBreakdownPercentage(item.percentage)}</span>
+				</div>
+
+				<div className="mt-1">
+					<Progress value={item.percentage} />
+				</div>
+			</div>
+		</li>
+	);
+}

components/dashboard/payment-overview/payment-breakdown-list.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import {
+	PaymentBreakdownListItem,
+	type PaymentBreakdownListItemData,
+} from "./payment-breakdown-list-item";
+
+export type { PaymentBreakdownListItemData } from "./payment-breakdown-list-item";
+
+type PaymentBreakdownListProps = {
+	items: PaymentBreakdownListItemData[];
+	emptyIcon: ReactNode;
+	emptyTitle: string;
+	emptyDescription: string;
+};
+
+export function PaymentBreakdownList({
+	items,
+	emptyIcon,
+	emptyTitle,
+	emptyDescription,
+}: PaymentBreakdownListProps) {
+	if (items.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={emptyIcon}
+				title={emptyTitle}
+				description={emptyDescription}
+			/>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-4 px-0">
+			<ul className="flex flex-col gap-2">
+				{items.map((item) => (
+					<PaymentBreakdownListItem key={item.id} item={item} />
+				))}
+			</ul>
+		</div>
+	);
+}

components/dashboard/payment-overview/payment-conditions-widget.tsx

@@ -0,0 +1,38 @@
+import { RiCheckLine, RiSlideshowLine } from "@remixicon/react";
+import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
+import { getConditionIcon } from "@/lib/utils/icons";
+import {
+	PaymentBreakdownList,
+	type PaymentBreakdownListItemData,
+} from "./payment-breakdown-list";
+
+type PaymentConditionsWidgetProps = {
+	data: PaymentConditionsData;
+};
+
+const resolveConditionIcon = (condition: string) =>
+	getConditionIcon(condition) ?? <RiCheckLine className="size-5" aria-hidden />;
+
+export function PaymentConditionsWidget({
+	data,
+}: PaymentConditionsWidgetProps) {
+	const items: PaymentBreakdownListItemData[] = data.conditions.map(
+		(condition) => ({
+			id: condition.condition,
+			title: condition.condition,
+			icon: resolveConditionIcon(condition.condition),
+			amount: condition.amount,
+			transactions: condition.transactions,
+			percentage: condition.percentage,
+		}),
+	);
+
+	return (
+		<PaymentBreakdownList
+			items={items}
+			emptyIcon={<RiSlideshowLine className="size-6 text-muted-foreground" />}
+			emptyTitle="Nenhuma despesa encontrada"
+			emptyDescription="As distribuições por condição aparecerão conforme novos lançamentos."
+		/>
+	);
+}

components/dashboard/payment-overview/payment-methods-widget.tsx

@@ -0,0 +1,38 @@
+import { RiBankCard2Line, RiMoneyDollarCircleLine } from "@remixicon/react";
+import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
+import { getPaymentMethodIcon } from "@/lib/utils/icons";
+import {
+	PaymentBreakdownList,
+	type PaymentBreakdownListItemData,
+} from "./payment-breakdown-list";
+
+type PaymentMethodsWidgetProps = {
+	data: PaymentMethodsData;
+};
+
+const resolvePaymentMethodIcon = (paymentMethod: string) =>
+	getPaymentMethodIcon(paymentMethod) ?? (
+		<RiBankCard2Line className="size-5" aria-hidden />
+	);
+
+export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
+	const items: PaymentBreakdownListItemData[] = data.methods.map((method) => ({
+		id: method.paymentMethod,
+		title: method.paymentMethod,
+		icon: resolvePaymentMethodIcon(method.paymentMethod),
+		amount: method.amount,
+		transactions: method.transactions,
+		percentage: method.percentage,
+	}));
+
+	return (
+		<PaymentBreakdownList
+			items={items}
+			emptyIcon={
+				<RiMoneyDollarCircleLine className="size-6 text-muted-foreground" />
+			}
+			emptyTitle="Nenhuma despesa encontrada"
+			emptyDescription="Cadastre despesas para visualizar a distribuição por forma de pagamento."
+		/>
+	);
+}

components/dashboard/payment-overview/payment-overview-widget-view.tsx

@@ -0,0 +1,44 @@
+import { RiMoneyDollarCircleLine, RiSlideshowLine } from "@remixicon/react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { PaymentOverviewTab } from "@/lib/dashboard/payment-overview-tabs";
+import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
+import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
+import { PaymentConditionsWidget } from "./payment-conditions-widget";
+import { PaymentMethodsWidget } from "./payment-methods-widget";
+
+type PaymentOverviewWidgetViewProps = {
+	activeTab: PaymentOverviewTab;
+	paymentConditionsData: PaymentConditionsData;
+	paymentMethodsData: PaymentMethodsData;
+	onTabChange: (value: string) => void;
+};
+
+export function PaymentOverviewWidgetView({
+	activeTab,
+	paymentConditionsData,
+	paymentMethodsData,
+	onTabChange,
+}: PaymentOverviewWidgetViewProps) {
+	return (
+		<Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
+			<TabsList className="grid grid-cols-2">
+				<TabsTrigger value="conditions" className="text-xs">
+					<RiSlideshowLine className="mr-1 size-3.5" />
+					Condições
+				</TabsTrigger>
+				<TabsTrigger value="methods" className="text-xs">
+					<RiMoneyDollarCircleLine className="mr-1 size-3.5" />
+					Formas
+				</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="conditions" className="mt-2">
+				<PaymentConditionsWidget data={paymentConditionsData} />
+			</TabsContent>
+
+			<TabsContent value="methods" className="mt-2">
+				<PaymentMethodsWidget data={paymentMethodsData} />
+			</TabsContent>
+		</Tabs>
+	);
+}

components/dashboard/payment-status-widget.tsx

@@ -1,103 +1,12 @@
 "use client";
 
-import {
-	RiCheckboxCircleLine,
-	RiHourglass2Line,
-	RiWallet3Line,
-} from "@remixicon/react";
-import MoneyValues from "@/components/money-values";
-import { CardContent } from "@/components/ui/card";
-import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { PaymentStatusData } from "@/lib/dashboard/payments/payment-status";
-import { Progress } from "../ui/progress";
+import { PaymentStatusWidgetView } from "./payment-status/payment-status-widget-view";
 
 type PaymentStatusWidgetProps = {
 	data: PaymentStatusData;
 };
 
-type CategorySectionProps = {
-	title: string;
-	total: number;
-	confirmed: number;
-	pending: number;
-};
-
-function CategorySection({
-	title,
-	total,
-	confirmed,
-	pending,
-}: CategorySectionProps) {
-	// Usa valores absolutos para calcular percentual corretamente
-	const absTotal = Math.abs(total);
-	const absConfirmed = Math.abs(confirmed);
-	const confirmedPercentage =
-		absTotal > 0 ? (absConfirmed / absTotal) * 100 : 0;
-
-	return (
-		<div className="space-y-2">
-			<div className="flex items-center justify-between">
-				<span className="text-sm font-medium text-foreground">{title}</span>
-				<MoneyValues
-					amount={total}
-					className="text-sm font-medium tabular-nums"
-				/>
-			</div>
-
-			{/* Barra de progresso */}
-			<Progress value={confirmedPercentage} className="h-2" />
-
-			{/* Status de confirmados e pendentes */}
-			<div className="flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-				<div className="flex items-center gap-1.5">
-					<RiCheckboxCircleLine className="size-3 shrink-0 text-success" />
-					<MoneyValues amount={confirmed} className="tabular-nums" />
-					<span className="text-xs text-muted-foreground">confirmados</span>
-				</div>
-
-				<div className="flex items-center gap-1.5">
-					<RiHourglass2Line className="size-3 shrink-0 text-warning" />
-					<MoneyValues amount={pending} className="tabular-nums" />
-					<span className="text-xs text-muted-foreground">pendentes</span>
-				</div>
-			</div>
-		</div>
-	);
-}
-
 export function PaymentStatusWidget({ data }: PaymentStatusWidgetProps) {
-	const isEmpty = data.income.total === 0 && data.expenses.total === 0;
-
-	if (isEmpty) {
-		return (
-			<CardContent className="px-0">
-				<WidgetEmptyState
-					icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
-					title="Nenhum valor a receber ou pagar no período"
-					description="Registre lançamentos para visualizar os valores confirmados e pendentes."
-				/>
-			</CardContent>
-		);
-	}
-
-	return (
-		<CardContent className="space-y-6 px-0">
-			<CategorySection
-				title="A Receber"
-				total={data.income.total}
-				confirmed={data.income.confirmed}
-				pending={data.income.pending}
-			/>
-
-			{/* Linha divisória pontilhada */}
-			<div className="border-t border-dashed" />
-
-			<CategorySection
-				title="A Pagar"
-				total={data.expenses.total}
-				confirmed={data.expenses.confirmed}
-				pending={data.expenses.pending}
-			/>
-		</CardContent>
-	);
+	return <PaymentStatusWidgetView data={data} />;
 }

components/dashboard/payment-status/payment-status-category-section.tsx

@@ -0,0 +1,50 @@
+import MoneyValues from "@/components/shared/money-values";
+import StatusDot from "@/components/shared/status-dot";
+import { Progress } from "@/components/ui/progress";
+
+type PaymentStatusCategorySectionProps = {
+	title: string;
+	total: number;
+	confirmed: number;
+	pending: number;
+};
+
+export function PaymentStatusCategorySection({
+	title,
+	total,
+	confirmed,
+	pending,
+}: PaymentStatusCategorySectionProps) {
+	const absTotal = Math.abs(total);
+	const absConfirmed = Math.abs(confirmed);
+	const confirmedPercentage =
+		absTotal > 0 ? (absConfirmed / absTotal) * 100 : 0;
+
+	return (
+		<div className="mt-4 space-y-3">
+			<div className="flex items-center justify-between">
+				<span className="text-sm font-medium text-foreground">{title}</span>
+				<MoneyValues
+					amount={total}
+					className="text-sm font-medium tabular-nums"
+				/>
+			</div>
+
+			<Progress value={confirmedPercentage} className="h-2" />
+
+			<div className="flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+				<div className="flex items-center gap-1.5">
+					<StatusDot color="bg-primary" />
+					<MoneyValues amount={confirmed} className="tabular-nums" />
+					<span className="text-xs text-muted-foreground">confirmados</span>
+				</div>
+
+				<div className="flex items-center gap-1.5">
+					<StatusDot color="bg-warning/40" />
+					<MoneyValues amount={pending} className="tabular-nums" />
+					<span className="text-xs text-muted-foreground">pendentes</span>
+				</div>
+			</div>
+		</div>
+	);
+}

components/dashboard/payment-status/payment-status-widget-view.tsx

@@ -0,0 +1,47 @@
+import { RiWallet3Line } from "@remixicon/react";
+import { CardContent } from "@/components/ui/card";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { PaymentStatusData } from "@/lib/dashboard/payments/payment-status";
+import { PaymentStatusCategorySection } from "./payment-status-category-section";
+
+type PaymentStatusWidgetViewProps = {
+	data: PaymentStatusData;
+};
+
+export function PaymentStatusWidgetView({
+	data,
+}: PaymentStatusWidgetViewProps) {
+	const isEmpty = data.income.total === 0 && data.expenses.total === 0;
+
+	if (isEmpty) {
+		return (
+			<CardContent className="px-0">
+				<WidgetEmptyState
+					icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
+					title="Nenhum valor a receber ou pagar no período"
+					description="Registre lançamentos para visualizar os valores confirmados e pendentes."
+				/>
+			</CardContent>
+		);
+	}
+
+	return (
+		<CardContent className="space-y-6 px-0">
+			<PaymentStatusCategorySection
+				title="A Receber"
+				total={data.income.total}
+				confirmed={data.income.confirmed}
+				pending={data.income.pending}
+			/>
+
+			<div className="border-t border-dashed" />
+
+			<PaymentStatusCategorySection
+				title="A Pagar"
+				total={data.expenses.total}
+				confirmed={data.expenses.confirmed}
+				pending={data.expenses.pending}
+			/>
+		</CardContent>
+	);
+}

components/dashboard/purchases-by-category-widget.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { RiArrowDownSFill, RiStore3Line } from "@remixicon/react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 import {
 	Select,
 	SelectContent,
@@ -13,7 +14,6 @@ import {
 } from "@/components/ui/select";
 import { CATEGORY_TYPE_LABEL } from "@/lib/categorias/constants";
 import type { PurchasesByCategoryData } from "@/lib/dashboard/purchases-by-category";
-import { WidgetEmptyState } from "../widget-empty-state";
 
 type PurchasesByCategoryWidgetProps = {
 	data: PurchasesByCategoryData;
@@ -38,21 +38,11 @@ const STORAGE_KEY = "purchases-by-category-selected";
 export function PurchasesByCategoryWidget({
 	data,
 }: PurchasesByCategoryWidgetProps) {
-	// Inicializa com a categoria salva ou a primeira disponível
-	const [selectedCategoryId, setSelectedCategoryId] = useState<string>(() => {
-		if (typeof window === "undefined") {
-			const firstCategory = data.categories[0];
-			return firstCategory ? firstCategory.id : "";
-		}
-
-		const saved = sessionStorage.getItem(STORAGE_KEY);
-		if (saved && data.categories.some((cat) => cat.id === saved)) {
-			return saved;
-		}
-
-		const firstCategory = data.categories[0];
-		return firstCategory ? firstCategory.id : "";
-	});
+	const firstCategoryId = data.categories[0]?.id ?? "";
+	const hasRestoredSelectionRef = useRef(false);
+	const hasPersistedSelectionRef = useRef(false);
+	const [selectedCategoryId, setSelectedCategoryId] =
+		useState<string>(firstCategoryId);
 
 	// Agrupa categorias por tipo
 	const categoriesByType = useMemo(() => {
@@ -72,27 +62,52 @@ export function PurchasesByCategoryWidget({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data.categories]);
 
-	// Salva a categoria selecionada quando mudar
+	// Restaura a categoria salva apenas depois da montagem para manter SSR e cliente consistentes.
 	useEffect(() => {
+		if (hasRestoredSelectionRef.current) {
+			return;
+		}
+
+		hasRestoredSelectionRef.current = true;
+
+		const saved = sessionStorage.getItem(STORAGE_KEY);
+		if (saved && data.categories.some((cat) => cat.id === saved)) {
+			setSelectedCategoryId(saved);
+			return;
+		}
+
+		setSelectedCategoryId(firstCategoryId);
+	}, [data.categories, firstCategoryId]);
+
+	// Salva a categoria selecionada quando mudar, sem sobrescrever o valor salvo na primeira montagem.
+	useEffect(() => {
+		if (!hasPersistedSelectionRef.current) {
+			hasPersistedSelectionRef.current = true;
+			return;
+		}
+
 		if (selectedCategoryId) {
 			sessionStorage.setItem(STORAGE_KEY, selectedCategoryId);
+			return;
 		}
+
+		sessionStorage.removeItem(STORAGE_KEY);
 	}, [selectedCategoryId]);
 
 	// Atualiza a categoria selecionada se ela não existir mais na lista
 	useEffect(() => {
+		if (!selectedCategoryId && firstCategoryId) {
+			setSelectedCategoryId(firstCategoryId);
+			return;
+		}
+
 		if (
 			selectedCategoryId &&
 			!data.categories.some((cat) => cat.id === selectedCategoryId)
 		) {
-			const firstCategory = data.categories[0];
-			if (firstCategory) {
-				setSelectedCategoryId(firstCategory.id);
-			} else {
-				setSelectedCategoryId("");
-			}
+			setSelectedCategoryId(firstCategoryId);
 		}
-	}, [data.categories, selectedCategoryId]);
+	}, [data.categories, firstCategoryId, selectedCategoryId]);
 
 	const currentTransactions = useMemo(() => {
 		if (!selectedCategoryId) {

components/dashboard/recurring-expenses-widget.tsx

@@ -1,9 +1,8 @@
 import { RiRefreshLine } from "@remixicon/react";
 import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
-import MoneyValues from "@/components/money-values";
-import { CardContent } from "@/components/ui/card";
+import MoneyValues from "@/components/shared/money-values";
 import type { RecurringExpensesData } from "@/lib/dashboard/expenses/recurring-expenses";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 
 type RecurringExpensesWidgetProps = {
 	data: RecurringExpensesData;
@@ -31,7 +30,7 @@ export function RecurringExpensesWidget({
 	}
 
 	return (
-		<CardContent className="flex flex-col gap-4 px-0">
+		<div className="flex flex-col gap-4 px-0">
 			<ul className="flex flex-col gap-2">
 				{data.expenses.map((expense) => {
 					return (
@@ -61,6 +60,6 @@ export function RecurringExpensesWidget({
 					);
 				})}
 			</ul>
-		</CardContent>
+		</div>
 	);
 }

components/dashboard/top-establishments-widget.tsx

@@ -1,8 +1,8 @@
 import { RiStore2Line } from "@remixicon/react";
 import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
 import type { TopEstablishmentsData } from "@/lib/dashboard/top-establishments";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 
 type TopEstablishmentsWidgetProps = {
 	data: TopEstablishmentsData;

components/dashboard/top-expenses-widget.tsx

@@ -3,13 +3,13 @@
 import { RiArrowUpDoubleLine } from "@remixicon/react";
 import { useMemo, useState } from "react";
 import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
-import MoneyValues from "@/components/money-values";
+import MoneyValues from "@/components/shared/money-values";
 import { Switch } from "@/components/ui/switch";
 import type {
 	TopExpense,
 	TopExpensesData,
 } from "@/lib/dashboard/expenses/top-expenses";
-import { WidgetEmptyState } from "../widget-empty-state";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
 
 type TopExpensesWidgetProps = {
 	allExpenses: TopExpensesData;

components/dashboard/welcome-widget.ts

@@ -0,0 +1,9 @@
+import {
+	formatBusinessCurrentDate,
+	getBusinessGreeting,
+} from "@/lib/utils/date";
+
+export const formatCurrentDate = (date = new Date()) =>
+	formatBusinessCurrentDate(date);
+
+export const getGreeting = (date = new Date()) => getBusinessGreeting(date);