chore: prepara versao 2.7.7

2026-07-09 03:16:01 +00:00 · 2026-06-20 14:57:18 -03:00
parent 4b5cdf81b8
commit 129295d2e2
27 changed files with 414 additions and 268 deletions
--- a/src/features/accounts/components/account-statement-card.tsx
+++ b/src/features/accounts/components/account-statement-card.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { RiInformationLine } from "@remixicon/react";
+import { RiBankLine, RiInformationLine } from "@remixicon/react";
 import Image from "next/image";
 import type { ReactNode } from "react";
 import MoneyValues from "@/shared/components/money-values";
@@ -52,28 +52,32 @@ export function AccountStatementCard({
 	const resultado = totalIncomes - totalExpenses;

 	return (
-		<Card className="gap-0 py-0">
+		<Card className="gap-0 py-0 space-y-2">
 			<CardContent className="px-4 py-4 sm:px-5 sm:py-5">
 				<div className="flex flex-col gap-4">
 					{/* Linha 1 — identidade */}
-					<div className="flex items-center justify-between gap-3">
-						<div className="flex min-w-0 items-center gap-3">
+					<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+						<div className="flex min-w-0 items-start gap-3">
 							{logoPath ? (
 								<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full">
 									<Image
 										src={logoPath}
 										alt={`Logo ${accountName}`}
-										width={42}
-										height={42}
+										width={48}
+										height={48}
 										className="h-full w-full object-contain"
 									/>
 								</div>
-							) : null}
-							<div className="min-w-0">
-								<h2 className="truncate text-sm font-semibold text-foreground">
+							) : (
+								<span className="flex size-12 shrink-0 items-center justify-center rounded-full border bg-card text-primary">
+									<RiBankLine className="size-5" aria-hidden />
+								</span>
+							)}
+							<div className="min-w-0 space-y-1">
+								<h2 className="truncate text-xl font-semibold text-foreground sm:text-2xl">
 									{accountName}
 								</h2>
-								<p className="text-xs text-muted-foreground">
+								<p className="text-sm leading-relaxed text-muted-foreground">
 									Extrato de {periodLabel}
 								</p>
 							</div>
--- a/src/features/dashboard/components/bills/bill-list-item.tsx
+++ b/src/features/dashboard/components/bills/bill-list-item.tsx
@@ -8,6 +8,7 @@ import {
 	isIncomeBill,
 } from "@/features/dashboard/bills/bills-helpers";
 import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
@@ -47,18 +48,15 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 	const href = buildTransactionsHref(bill.name, period);

 	return (
-		<li className="flex items-center justify-between transition-all duration-300 py-1.5">
-			<div className="flex min-w-0 flex-1 items-center gap-2 py-0.5">
+		<li className={styles.row}>
+			<div className={styles.main}>
 				<EstablishmentLogo name={bill.name} size={37} />

-				<div className="min-w-0">
-					<Link
-						href={href}
-						className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-					>
+				<div className={styles.textStack}>
+					<Link href={href} className={styles.titleLink}>
 						<span className="truncate">{bill.name}</span>
 					</Link>
-					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+					<div className={styles.meta}>
 						{statusLabel ? (
 							statusTooltipLabel ? (
 								<Tooltip>
@@ -92,10 +90,10 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 				</div>
 			</div>

-			<div className="flex shrink-0 flex-col items-end">
-				<MoneyValues className="font-medium" amount={bill.amount} />
+			<div className={styles.trailing}>
+				<MoneyValues className={styles.trailingValue} amount={bill.amount} />
 				{bill.isSettled ? (
-					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+					<span className={`${styles.trailingMeta} text-success`}>
 						<RiCheckboxCircleFill className="size-3.5" />{" "}
 						{income ? "Recebido" : "Pago"}
 					</span>
@@ -104,7 +102,7 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 						type="button"
 						size="sm"
 						variant="link"
-						className="-mr-1.5 h-7 px-1.5 py-0"
+						className={styles.actionButton}
 						onClick={() => onPay(bill.id)}
 					>
 						{overdue ? (
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -45,25 +46,23 @@ export function CategoryBreakdownListItem({

 	return (
 		<div>
-			<div className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5">
-				<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
-					{position}
-				</span>
-				<div className="flex min-w-0 flex-1 items-center gap-2">
+			<div className={styles.row}>
+				<span className={styles.rank}>{position}</span>
+				<div className={styles.main}>
 					<CategoryIconBadge
 						icon={category.categoryIcon}
 						name={category.categoryName}
 					/>
-					<div className="min-w-0 flex-1">
+					<div className={styles.textStack}>
 						<div className="flex items-center gap-2">
 							<Link
 								href={`/categories/${category.categoryId}?periodo=${periodParam}`}
-								className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+								className={styles.titleLink}
 							>
 								<span className="truncate">{category.categoryName}</span>
 							</Link>
 						</div>
-						<div className="flex flex-wrap items-center gap-x-1 text-xs text-muted-foreground">
+						<div className={styles.meta}>
 							<span>
 								{formatPercentage(
 									category.percentageOfTotal,
@@ -97,13 +96,13 @@ export function CategoryBreakdownListItem({
 					</div>
 				</div>

-				<div className="flex shrink-0 flex-col items-end gap-0.5">
+				<div className={styles.trailing}>
 					<MoneyValues
-						className="text-foreground font-medium"
+						className={styles.trailingValue}
 						amount={category.currentAmount}
 					/>
 					{category.percentageChange !== null ? (
-						<span className="flex items-center gap-1 text-xs text-muted-foreground">
+						<span className={`${styles.trailingMeta} text-muted-foreground`}>
 							<PercentageChangeIndicator
 								value={category.percentageChange}
 								label={formatPercentage(
--- a/src/features/dashboard/components/dashboard-widget-list-styles.ts
+++ b/src/features/dashboard/components/dashboard-widget-list-styles.ts
@@ -0,0 +1,15 @@
+export const dashboardWidgetListStyles = {
+	row: "flex min-h-[3.25rem] items-center justify-between gap-2 py-1.5 transition-all duration-300",
+	main: "flex min-w-0 flex-1 items-center gap-2",
+	textStack: "min-w-0 flex-1 space-y-0.5",
+	title: "truncate text-sm font-medium leading-5 text-foreground",
+	titleLink:
+		"inline-flex max-w-full items-center gap-1 text-sm font-medium leading-5 text-foreground underline-offset-2 hover:text-primary hover:underline",
+	meta: "flex min-h-4 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs leading-4 text-muted-foreground",
+	rank: "w-3 shrink-0 text-left text-xs font-medium leading-4 text-muted-foreground",
+	trailing:
+		"flex min-w-[5.75rem] shrink-0 flex-col items-end gap-0.5 text-right",
+	trailingValue: "font-medium leading-5",
+	trailingMeta: "flex h-5 items-center gap-0.5 text-xs font-medium leading-4",
+	actionButton: "-mr-1 h-5 px-1 py-0 text-xs leading-4",
+};
--- a/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
+++ b/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
@@ -1,5 +1,6 @@
 import { RiPencilLine } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	clampGoalProgress,
 	formatGoalProgressPercentage,
@@ -30,7 +31,7 @@ export function GoalProgressItem({ item, onEdit }: GoalProgressItemProps) {
 	const usedPercentageLabel = formatGoalProgressPercentage(item.usedPercentage);

 	return (
-		<li className="group py-2 transition-all duration-300">
+		<li className="group py-1.5 transition-all duration-300">
 			<div className="flex items-start justify-between gap-3">
 				<div className="flex min-w-0 flex-1 items-start gap-2">
 					<CategoryIconBadge
@@ -42,16 +43,14 @@ export function GoalProgressItem({ item, onEdit }: GoalProgressItemProps) {
 						{item.categoryId ? (
 							<Link
 								href={`/categories/${item.categoryId}?periodo=${formatPeriodForUrl(item.period)}`}
-								className="block truncate text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+								className={`${styles.title} block underline-offset-2 hover:text-primary hover:underline`}
 							>
 								{item.categoryName}
 							</Link>
 						) : (
-							<p className="truncate text-sm font-medium text-foreground">
-								{item.categoryName}
-							</p>
+							<p className={styles.title}>{item.categoryName}</p>
 						)}
-						<p className="mt-0.5 text-xs text-muted-foreground">
+						<p className="mt-0.5 text-xs leading-4 text-muted-foreground">
 							<MoneyValues className="font-medium" amount={item.spentAmount} />{" "}
 							de{" "}
 							<MoneyValues className="font-medium" amount={item.budgetAmount} />
--- a/src/features/dashboard/components/invoices/invoice-list-item.tsx
+++ b/src/features/dashboard/components/invoices/invoice-list-item.tsx
@@ -1,5 +1,6 @@
 import { RiCheckboxCircleFill, RiGroupLine } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import {
 	buildInvoiceDetailsHref,
@@ -62,18 +63,14 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 			: null;

 	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"
-		>
+		<Link prefetch href={detailHref} className={styles.titleLink}>
 			<span className="truncate">{invoice.cardName}</span>
 		</Link>
 	);

 	return (
-		<li className="flex items-center justify-between transition-all duration-300 py-1.5">
-			<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
+		<li className={styles.row}>
+			<div className={styles.main}>
 				<InvoiceLogo
 					cardName={invoice.cardName}
 					logo={invoice.logo}
@@ -81,7 +78,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 					containerClassName="size-9.5"
 				/>

-				<div className="min-w-0">
+				<div className={styles.textStack}>
 					<div className="flex max-w-full items-center gap-1">
 						{hasBreakdown ? (
 							<HoverCard openDelay={150}>
@@ -155,7 +152,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 						) : null}
 					</div>

-					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+					<div className={styles.meta}>
 						{!isPaid ? (
 							dueTooltipLabel ? (
 								<Tooltip>
@@ -204,13 +201,13 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 				</div>
 			</div>

-			<div className="flex shrink-0 flex-col items-end">
+			<div className={styles.trailing}>
 				<MoneyValues
-					className="font-medium"
+					className={styles.trailingValue}
 					amount={Math.abs(invoice.totalAmount)}
 				/>
 				{isPaid ? (
-					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+					<span className={`${styles.trailingMeta} text-success`}>
 						<RiCheckboxCircleFill className="size-3.5" /> Pago
 					</span>
 				) : (
@@ -218,7 +215,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 						type="button"
 						size="sm"
 						variant="link"
-						className="-mr-1.5 h-7 px-1.5 py-0"
+						className={styles.actionButton}
 						onClick={() => onPay(invoice.id)}
 					>
 						{isOverdue ? (
--- a/src/features/dashboard/components/notes/note-list-item.tsx
+++ b/src/features/dashboard/components/notes/note-list-item.tsx
@@ -3,6 +3,7 @@ import {
 	RiFileList2Line,
 	RiPencilLine,
 } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { Note } from "@/features/notes/components/types";
 import {
 	buildNoteDisplayTitle,
@@ -33,18 +34,16 @@ export function NoteListItem({
 	const isTask = note.type === "tarefa";

 	return (
-		<li className="group flex items-center justify-between gap-2 py-1.5 transition-all duration-300">
-			<div className="min-w-0 flex-1">
-				<p className="truncate text-sm font-medium text-foreground">
-					{displayTitle}
-				</p>
-				<div className="mt-1 flex min-w-0 items-center gap-2">
+		<li className={`group ${styles.row}`}>
+			<div className={styles.textStack}>
+				<p className={styles.title}>{displayTitle}</p>
+				<div className={styles.meta}>
 					{isTask ? (
 						<Badge variant="outline" className="h-5 px-1.5 text-xs">
 							{getNoteTasksSummary(note)}
 						</Badge>
 					) : null}
-					<p className="truncate text-xs text-muted-foreground">
+					<p className="truncate">
 						<span className="inline-flex items-center gap-1">
 							<RiCalendarLine className="size-3.5 shrink-0" />
 							{createdAtLabel}
@@ -53,7 +52,7 @@ export function NoteListItem({
 				</div>
 			</div>

-			<div className="flex shrink-0 items-center gap-0.5">
+			<div className="flex min-w-[4.5rem] shrink-0 items-center justify-end gap-0.5">
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<Button
--- a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { ReactNode } from "react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	formatPaymentBreakdownPercentage,
 	formatPaymentBreakdownTransactionsLabel,
@@ -31,10 +32,8 @@ export function PaymentBreakdownListItem({
 	position,
 }: PaymentBreakdownListItemProps) {
 	return (
-		<div className="flex items-center gap-2 transition-all duration-300 py-1">
-			<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
-				{position}
-			</span>
+		<div className={styles.row}>
+			<span className={styles.rank}>{position}</span>
 			<div
 				className="flex size-9.5 shrink-0 items-center justify-center rounded-full"
 				style={{
@@ -45,26 +44,26 @@ export function PaymentBreakdownListItem({
 				{item.icon}
 			</div>

-			<div className="min-w-0 flex-1">
-				<div className="flex items-center justify-between">
+			<div className={styles.textStack}>
+				<div className="flex items-center justify-between gap-2">
 					{item.href ? (
-						<Link
-							href={item.href}
-							className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-						>
+						<Link href={item.href} className={styles.titleLink}>
 							<span className="truncate">{item.title}</span>
 						</Link>
 					) : (
-						<p className="text-sm font-medium text-foreground">{item.title}</p>
+						<p className={styles.title}>{item.title}</p>
 					)}
-					<MoneyValues className="shrink-0 font-medium" amount={item.amount} />
+					<MoneyValues
+						className={`shrink-0 ${styles.trailingValue}`}
+						amount={item.amount}
+					/>
 				</div>

-				<div className="flex items-center justify-between text-xs text-muted-foreground">
+				<div className={styles.meta}>
 					<span>
 						{formatPaymentBreakdownTransactionsLabel(item.transactions)}
 					</span>
-					<span>
+					<span className="ml-auto">
 						{formatPaymentBreakdownPercentage(item.percentage)} do total
 					</span>
 				</div>
--- a/src/features/dashboard/components/widgets/attachments-widget.tsx
+++ b/src/features/dashboard/components/widgets/attachments-widget.tsx
@@ -9,6 +9,7 @@ import {
 import { useState } from "react";
 import { AttachmentPreview } from "@/features/attachments/components/attachment-preview";
 import type { AttachmentForPeriod } from "@/features/attachments/queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	Tooltip,
 	TooltipContent,
@@ -77,7 +78,7 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 							<button
 								type="button"
 								onClick={() => setSelectedIndex(index)}
-								className="flex w-full items-center gap-2 py-2 text-left"
+								className={`${styles.row} w-full text-left`}
 							>
 								<div className="shrink-0">
 									{isPdf && <RiFilePdf2Line className="size-6 text-red-500" />}
@@ -86,10 +87,10 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 										<RiFileLine className="size-6 text-muted-foreground" />
 									)}
 								</div>
-								<div className="min-w-0 flex-1">
+								<div className={styles.textStack}>
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<span className="block truncate text-sm font-medium text-foreground hover:underline">
+											<span className={`${styles.title} block hover:underline`}>
 												{attachment.fileName}
 											</span>
 										</TooltipTrigger>
@@ -97,18 +98,18 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 											{attachment.fileName}
 										</TooltipContent>
 									</Tooltip>
-									<span className="block truncate text-xs text-muted-foreground">
+									<span className={`${styles.meta} block truncate`}>
 										{attachment.transactionName}
 									</span>
 								</div>
-								<div className="shrink-0 text-right">
-									<span className="block text-xs text-muted-foreground">
+								<div className={styles.trailing}>
+									<span className="block text-xs leading-4 text-muted-foreground">
 										{formatDateOnly(attachment.purchaseDate, {
 											day: "2-digit",
 											month: "2-digit",
 										}) ?? "—"}
 									</span>
-									<span className="block text-xs text-muted-foreground/60">
+									<span className="block text-xs leading-4 text-muted-foreground/60">
 										{formatBytes(attachment.fileSize)}
 									</span>
 								</div>
--- a/src/features/dashboard/components/widgets/category-trends-widget.tsx
+++ b/src/features/dashboard/components/widgets/category-trends-widget.tsx
@@ -7,6 +7,7 @@ import {
 	RiLineChartLine,
 } from "@remixicon/react";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -45,17 +46,15 @@ export function CategoryTrendsWidget({

 				return (
 					<li key={category.categoryId}>
-						<div className="-mx-2 flex items-center gap-3 rounded-md p-2">
+						<div className={styles.row}>
 							<CategoryIconBadge
 								icon={category.categoryIcon}
 								name={category.categoryName}
 								size="md"
 							/>
-							<div className="min-w-0 flex-1">
-								<p className="truncate text-sm font-medium text-foreground">
-									{category.categoryName}
-								</p>
-								<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+							<div className={styles.textStack}>
+								<p className={styles.title}>{category.categoryName}</p>
+								<p className={styles.meta}>
 									<span
 										className="inline-flex items-center gap-1"
 										title="Mês anterior"
@@ -81,7 +80,9 @@ export function CategoryTrendsWidget({
 									</span>
 								</p>
 							</div>
-							<span className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
+							<span
+								className={`${styles.trailingMeta} min-w-[5.75rem] justify-end text-muted-foreground`}
+							>
 								<PercentageChangeIndicator
 									value={change}
 									label={formatPercentage(change, {
--- a/src/features/dashboard/components/widgets/inbox-widget.tsx
+++ b/src/features/dashboard/components/widgets/inbox-widget.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { DashboardInboxSnapshot } from "@/features/dashboard/lib/inbox-snapshot-queries";
 import type { DashboardWidgetQuickActionOptions } from "@/features/dashboard/widget-registry/widget-config";
 import {
@@ -201,8 +202,8 @@ export function InboxWidget({
 				const displayLogo = logoSrc ?? DEFAULT_INBOX_APP_LOGO;

 				return (
-					<div key={item.id} className="flex items-center justify-between py-2">
-						<div className="flex min-w-0 flex-1 items-center gap-2">
+					<div key={item.id} className={styles.row}>
+						<div className={styles.main}>
 							<Image
 								src={displayLogo}
 								alt={item.sourceAppName ?? ""}
@@ -212,11 +213,9 @@ export function InboxWidget({
 								unoptimized
 							/>

-							<div className="min-w-0">
-								<p className="truncate text-sm font-medium text-foreground">
-									{displayName}
-								</p>
-								<div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+							<div className={styles.textStack}>
+								<p className={styles.title}>{displayName}</p>
+								<div className={styles.meta}>
 									{item.sourceAppName && (
 										<span className="truncate">{item.sourceAppName}</span>
 									)}
@@ -227,9 +226,9 @@ export function InboxWidget({
 							</div>
 						</div>

-						<div className="ml-2 flex shrink-0 items-center gap-1">
+						<div className="ml-2 flex min-w-[7.5rem] shrink-0 items-center justify-end gap-1">
 							{amount !== null && (
-								<MoneyValues className="font-medium" amount={amount} />
+								<MoneyValues className={styles.trailingValue} amount={amount} />
 							)}
 							{amount === null && (
 								<span className="max-w-20 text-right text-xs leading-tight text-muted-foreground">
--- a/src/features/dashboard/components/widgets/my-accounts-widget.tsx
+++ b/src/features/dashboard/components/widgets/my-accounts-widget.tsx
@@ -10,6 +10,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTransition } from "react";
 import { toast } from "sonner";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { DashboardAccount } from "@/features/dashboard/lib/accounts-queries";
 import { updateMyAccountsWidgetPreference } from "@/features/dashboard/widget-registry/widget-actions";
 import MoneyValues from "@/shared/components/money-values";
@@ -139,11 +140,8 @@ export function MyAccountsWidget({
 							const logoSrc = resolveLogoSrc(account.logo);

 							return (
-								<li
-									key={account.id}
-									className="flex items-center justify-between py-1.5 transition-all duration-300"
-								>
-									<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
+								<li key={account.id} className={styles.row}>
+									<div className={styles.main}>
 										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full">
 											{logoSrc ? (
 												<Image
@@ -161,18 +159,18 @@ export function MyAccountsWidget({
 											)}
 										</div>

-										<div className="min-w-0">
+										<div className={styles.textStack}>
 											<Link
 												prefetch
 												href={`/accounts/${
 													account.id
 												}/statement?periodo=${formatPeriodForUrl(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"
+												className={styles.titleLink}
 											>
 												<span className="truncate">{account.name}</span>
 											</Link>

-											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+											<div className={styles.meta}>
 												<span className="truncate">{account.accountType}</span>
 												{account.excludeFromBalance ? (
 													<Tooltip>
@@ -195,10 +193,10 @@ export function MyAccountsWidget({
 										</div>
 									</div>

-									<div className="flex flex-col items-end gap-0.5 text-right">
+									<div className={styles.trailing}>
 										<MoneyValues
 											className={cn(
-												"font-medium",
+												styles.trailingValue,
 												account.balance < 0 && "text-destructive",
 											)}
 											amount={account.balance}
--- a/src/features/dashboard/components/widgets/payers-widget.tsx
+++ b/src/features/dashboard/components/widgets/payers-widget.tsx
@@ -2,6 +2,7 @@

 import { RiGroupLine, RiVerifiedBadgeFill } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import type { DashboardPagador } from "@/features/dashboard/lib/payers-queries";
 import MoneyValues from "@/shared/components/money-values";
@@ -44,14 +45,9 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 							: null;

 						return (
-							<div
-								key={payer.id}
-								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
-							>
-								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
-									{index + 1}
-								</span>
-								<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
+							<div key={payer.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<Avatar className="size-9.5 shrink-0">
 										<AvatarImage
 											src={getAvatarSrc(payer.avatarUrl)}
@@ -60,11 +56,11 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										<AvatarFallback>{initials}</AvatarFallback>
 									</Avatar>

-									<div className="min-w-0">
+									<div className={styles.textStack}>
 										<Link
 											prefetch
 											href={`/payers/${payer.id}`}
-											className="inline-flex max-w-full items-center gap-1 text-sm text-foreground underline-offset-2 hover:text-primary hover:underline"
+											className={styles.titleLink}
 										>
 											<span className="truncate font-medium">{payer.name}</span>
 											{payer.isAdmin && (
@@ -84,18 +80,18 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 												</Tooltip>
 											)}
 										</Link>
-										<p className="truncate text-xs text-muted-foreground">
-											Despesas no período
-										</p>
+										<p className={styles.meta}>Despesas no período</p>
 									</div>
 								</div>

-								<div className="flex shrink-0 flex-col items-end">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={payer.totalExpenses}
 									/>
-									<div className="flex items-center gap-1 text-xs text-muted-foreground">
+									<div
+										className={`${styles.trailingMeta} text-muted-foreground`}
+									>
 										<PercentageChangeIndicator value={percentageChange} />
 										{percentageChange !== null ? (
 											<span>vs. mês ant.</span>
--- a/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
+++ b/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
@@ -3,6 +3,7 @@
 import { RiFileList2Line, RiStore3Line } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { PurchasesByCategoryData } from "@/features/dashboard/categories/purchases-by-category-queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
@@ -162,26 +163,21 @@ export function PurchasesByCategoryWidget({
 				<div className="flex flex-col">
 					{currentTransactions.map((transaction) => {
 						return (
-							<div
-								key={transaction.id}
-								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
-							>
-								<div className="flex min-w-0 flex-1 items-center gap-2">
+							<div key={transaction.id} className={styles.row}>
+								<div className={styles.main}>
 									<EstablishmentLogo name={transaction.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{transaction.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{transaction.name}</p>
+										<p className={styles.meta}>
 											{formatTransactionDate(transaction.purchaseDate)}
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={transaction.amount}
 									/>
 								</div>
--- a/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
@@ -1,4 +1,5 @@
 import { RiRefreshLine } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurring-expenses-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -36,31 +37,27 @@ export function RecurringExpensesWidget({
 				.sort((a, b) => b.amount - a.amount)
 				.map((expense) => {
 					return (
-						<div
-							key={expense.id}
-							className="flex items-center gap-2 transition-all duration-300 py-1.5"
-						>
-							<EstablishmentLogo name={expense.name} size={37} />
+						<div key={expense.id} className={styles.row}>
+							<div className={styles.main}>
+								<EstablishmentLogo name={expense.name} size={37} />

-							<div className="min-w-0 flex-1">
-								<div className="flex items-center justify-between">
-									<p className="truncate text-foreground text-sm font-medium">
-										{expense.name}
-									</p>
-
-									<MoneyValues
-										className="font-medium"
-										amount={expense.amount}
-									/>
+								<div className={styles.textStack}>
+									<p className={styles.title}>{expense.name}</p>
+									<div className={styles.meta}>
+										<span className="inline-flex min-w-0 items-center gap-1 [&_svg]:size-3.5">
+											{getPaymentMethodIcon(expense.paymentMethod)}
+											{expense.paymentMethod}
+										</span>
+										<span>{formatOccurrences(expense.recurrenceCount)}</span>
+									</div>
 								</div>
+							</div>

-								<div className="flex items-center justify-between text-xs text-muted-foreground">
-									<span className="inline-flex items-center gap-1 [&_svg]:size-3.5">
-										{getPaymentMethodIcon(expense.paymentMethod)}
-										{expense.paymentMethod}
-									</span>
-									<span>{formatOccurrences(expense.recurrenceCount)}</span>
-								</div>
+							<div className={styles.trailing}>
+								<MoneyValues
+									className={styles.trailingValue}
+									amount={expense.amount}
+								/>
 							</div>
 						</div>
 					);
--- a/src/features/dashboard/components/widgets/top-establishments-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-establishments-widget.tsx
@@ -1,4 +1,5 @@
 import { RiStore2Line } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { TopEstablishmentsData } from "@/features/dashboard/lib/top-establishments-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -30,30 +31,23 @@ export function TopEstablishmentsWidget({
 				<div className="flex flex-col">
 					{data.establishments.map((establishment, index) => {
 						return (
-							<div
-								key={establishment.id}
-								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
-							>
-								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
-									{index + 1}
-								</span>
-								<div className="flex min-w-0 flex-1 items-center gap-2">
+							<div key={establishment.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<EstablishmentLogo name={establishment.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{establishment.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{establishment.name}</p>
+										<p className={styles.meta}>
 											{formatOccurrencesLabel(establishment.occurrences)} ·
 											total acumulado
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={establishment.amount}
 									/>
 								</div>
--- a/src/features/dashboard/components/widgets/top-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-expenses-widget.tsx
@@ -2,6 +2,7 @@

 import { RiArrowUpDoubleLine } from "@remixicon/react";
 import { useMemo } from "react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type {
 	TopExpense,
 	TopExpensesData,
@@ -49,29 +50,22 @@ export function TopExpensesWidget({ data }: TopExpensesWidgetProps) {
 				<div className="flex flex-col">
 					{expenses.map((expense, index) => {
 						return (
-							<div
-								key={expense.id}
-								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
-							>
-								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
-									{index + 1}
-								</span>
-								<div className="flex min-w-0 flex-1 items-center gap-2">
+							<div key={expense.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<EstablishmentLogo name={expense.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{expense.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{expense.name}</p>
+										<p className={styles.meta}>
 											{formatTransactionDate(expense.purchaseDate)}
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={expense.amount}
 									/>
 								</div>
--- a/src/features/invoices/components/invoice-summary-card.tsx
+++ b/src/features/invoices/components/invoice-summary-card.tsx
@@ -206,32 +206,32 @@ export function InvoiceSummaryCard({
 	};

 	return (
-		<Card className="gap-0 py-0">
+		<Card className="gap-0 py-0 space-y-2">
 			<CardContent className="px-4 py-4 sm:px-5 sm:py-5">
 				<div className="flex flex-col gap-4">
 					{/* Linha 1 — identidade */}
-					<div className="flex items-center justify-between gap-3">
-						<div className="flex min-w-0 items-center gap-3">
+					<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+						<div className="flex min-w-0 items-start gap-3">
 							{logoPath ? (
 								<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full">
 									<Image
 										src={logoPath}
 										alt={`Logo ${cardName}`}
-										width={42}
-										height={42}
+										width={48}
+										height={48}
 										className="h-full w-full object-contain"
 									/>
 								</div>
 							) : cardBrand ? (
-								<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-background text-xs font-medium text-muted-foreground">
+								<span className="flex size-12 shrink-0 items-center justify-center rounded-full border bg-card text-sm font-semibold text-primary">
 									{cardBrand.slice(0, 2).toUpperCase()}
 								</span>
 							) : null}
-							<div className="min-w-0">
-								<h2 className="truncate text-sm font-semibold text-foreground">
+							<div className="min-w-0 space-y-1">
+								<h2 className="truncate text-xl font-semibold text-foreground sm:text-2xl">
 									{cardName}
 								</h2>
-								<p className="text-xs text-muted-foreground">
+								<p className="text-sm leading-relaxed text-muted-foreground">
 									Fatura de {periodLabel}
 								</p>
 							</div>
--- a/src/features/transactions/actions/core.ts
+++ b/src/features/transactions/actions/core.ts
@@ -515,6 +515,11 @@ export const toggleSettlementSchema = z.object({

 export const convertToInstallmentSchema = z.object({
 	id: uuidSchema("Lançamento"),
+	installmentCount: z.coerce
+		.number({ message: "Informe em quantas parcelas dividir." })
+		.int()
+		.min(2, "O parcelamento deve ter ao menos duas parcelas.")
+		.max(60, "Selecione até 60 parcelas."),
 });

 export const convertToRecurringSchema = z.object({
--- a/src/features/transactions/actions/single-actions.ts
+++ b/src/features/transactions/actions/single-actions.ts
@@ -484,7 +484,10 @@ export async function convertTransactionToInstallmentAction(
 		const data = convertToInstallmentSchema.parse(input);

 		const existing = await db.query.transactions.findFirst({
-			where: and(eq(transactions.id, data.id), eq(transactions.userId, user.id)),
+			where: and(
+				eq(transactions.id, data.id),
+				eq(transactions.userId, user.id),
+			),
 		});

 		if (!existing) {
@@ -512,37 +515,32 @@ export async function convertTransactionToInstallmentAction(
 		) {
 			return {
 				success: false,
-				error: "Apenas lançamentos à vista de cartão de crédito podem ser convertidos.",
+				error:
+					"Apenas lançamentos à vista de cartão de crédito podem ser convertidos.",
 			};
 		}

 		if (existing.splitGroupId || existing.isDivided) {
 			return {
 				success: false,
-				error: "Lançamentos divididos ainda não podem ser convertidos em parcelamento.",
+				error:
+					"Lançamentos divididos ainda não podem ser convertidos em parcelamento.",
 			};
 		}

 		const detected = detectInstallmentFromName(existing.name);
-		if (!detected) {
-			return {
-				success: false,
-				error:
-					"Não encontrei um padrão de parcela no nome deste lançamento, como 2/10 ou Parcela 2 de 10.",
-			};
-		}
-
-		const amountSign: 1 | -1 =
-			existing.transactionType === "Despesa" ? -1 : 1;
-		const totalCents =
-			Math.round(Math.abs(Number(existing.amount)) * 100) *
-			detected.installmentCount;
+		const transactionName =
+			detected?.installmentCount === data.installmentCount
+				? detected.name
+				: existing.name;
+		const amountSign: 1 | -1 = existing.transactionType === "Despesa" ? -1 : 1;
+		const totalCents = Math.round(Math.abs(Number(existing.amount)) * 100);
 		const seriesId = randomUUID();
 		const records = buildTransactionRecords({
 			data: {
 				purchaseDate: existing.purchaseDate.toISOString().slice(0, 10),
 				period: existing.period,
-				name: detected.name,
+				name: transactionName,
 				transactionType: existing.transactionType as "Receita" | "Despesa",
 				amount: totalCents / 100,
 				condition: "Parcelado",
@@ -553,8 +551,8 @@ export async function convertTransactionToInstallmentAction(
 				cardId: existing.cardId,
 				categoryId: existing.categoryId,
 				note: existing.note,
-				installmentCount: detected.installmentCount,
-				startInstallment: detected.currentInstallment,
+				installmentCount: data.installmentCount,
+				startInstallment: 1,
 				dueDate: existing.dueDate?.toISOString().slice(0, 10),
 				isSettled: null,
 			},
@@ -600,7 +598,10 @@ export async function convertTransactionToInstallmentAction(
 			const limitCheck = await validateCardLimit({
 				userId: user.id,
 				cardId: existing.cardId,
-				addAmount: records.reduce((acc, row) => acc + Math.abs(Number(row.amount)), 0),
+				addAmount: records.reduce(
+					(acc, row) => acc + Math.abs(Number(row.amount)),
+					0,
+				),
 				excludeTransactionIds: [existing.id],
 			});

@@ -625,7 +626,10 @@ export async function convertTransactionToInstallmentAction(
 					seriesId,
 				})
 				.where(
-					and(eq(transactions.id, existing.id), eq(transactions.userId, user.id)),
+					and(
+						eq(transactions.id, existing.id),
+						eq(transactions.userId, user.id),
+					),
 				);

 			if (rowsToInsert.length > 0) {
@@ -637,7 +641,7 @@ export async function convertTransactionToInstallmentAction(

 		return {
 			success: true,
-			message: `Lançamento convertido em ${detected.installmentCount} parcelas.`,
+			message: `Lançamento convertido em ${data.installmentCount} parcelas.`,
 			data: { createdCount: rowsToInsert.length },
 		};
 	} catch (error) {
@@ -653,7 +657,10 @@ export async function convertTransactionToRecurringAction(
 		const data = convertToRecurringSchema.parse(input);

 		const existing = await db.query.transactions.findFirst({
-			where: and(eq(transactions.id, data.id), eq(transactions.userId, user.id)),
+			where: and(
+				eq(transactions.id, data.id),
+				eq(transactions.userId, user.id),
+			),
 		});

 		if (!existing) {
@@ -677,19 +684,20 @@ export async function convertTransactionToRecurringAction(
 		if (existing.condition !== "À vista") {
 			return {
 				success: false,
-				error: "Apenas lançamentos à vista podem ser convertidos em recorrência.",
+				error:
+					"Apenas lançamentos à vista podem ser convertidos em recorrência.",
 			};
 		}

 		if (existing.splitGroupId || existing.isDivided) {
 			return {
 				success: false,
-				error: "Lançamentos divididos ainda não podem ser convertidos em recorrência.",
+				error:
+					"Lançamentos divididos ainda não podem ser convertidos em recorrência.",
 			};
 		}

-		const amountSign: 1 | -1 =
-			existing.transactionType === "Despesa" ? -1 : 1;
+		const amountSign: 1 | -1 = existing.transactionType === "Despesa" ? -1 : 1;
 		const totalCents = Math.round(Math.abs(Number(existing.amount)) * 100);
 		const seriesId = randomUUID();
 		const isCreditCard = existing.paymentMethod === "Cartão de crédito";
@@ -760,6 +768,22 @@ export async function convertTransactionToRecurringAction(
 					)} já estão pagas. Desfaça o pagamento antes de converter este lançamento.`,
 				};
 			}
+
+			if (existing.transactionType === "Despesa") {
+				const limitCheck = await validateCardLimit({
+					userId: user.id,
+					cardId: existing.cardId,
+					addAmount: records.reduce(
+						(acc, row) => acc + Math.abs(Number(row.amount)),
+						0,
+					),
+					excludeTransactionIds: [existing.id],
+				});
+
+				if (!limitCheck.ok) {
+					return { success: false, error: limitCheck.error };
+				}
+			}
 		}

 		await db.transaction(async (tx: typeof db) => {
@@ -780,7 +804,10 @@ export async function convertTransactionToRecurringAction(
 					seriesId,
 				})
 				.where(
-					and(eq(transactions.id, existing.id), eq(transactions.userId, user.id)),
+					and(
+						eq(transactions.id, existing.id),
+						eq(transactions.userId, user.id),
+					),
 				);

 			if (rowsToInsert.length > 0) {
--- a/src/features/transactions/components/import/import-page.tsx
+++ b/src/features/transactions/components/import/import-page.tsx
@@ -49,6 +49,8 @@ const categoryGroupByTransactionType = {
 	income: "receita",
 } as const;

+const normalizeCategoryName = (value: string) => value.trim().toLowerCase();
+
 interface ImportPageProps {
 	payerOptions: SelectOption[];
 	accountOptions: SelectOption[];
@@ -112,8 +114,9 @@ export function ImportPage({
 							categoryMappings[normalizeDescriptionKey(t.description)] ?? null;

 						if (t.categoryRaw) {
+							const categoryRaw = normalizeCategoryName(t.categoryRaw);
 							const matchedOption = categoryOptions.find(
-								(opt) => opt.label.toLowerCase() === t.categoryRaw?.toLowerCase()
+								(opt) => normalizeCategoryName(opt.label) === categoryRaw,
 							);
 							if (matchedOption) {
 								mappedCategoryId = matchedOption.value;
--- a/src/features/transactions/components/page/transactions-page.tsx
+++ b/src/features/transactions/components/page/transactions-page.tsx
@@ -33,6 +33,7 @@ import {
 } from "@/shared/components/ui/dialog";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
+import { formatCurrency } from "@/shared/utils/currency";
 import type {
 	TransactionsExportContext,
 	TransactionsPaginationState,
@@ -97,6 +98,9 @@ interface TransactionsPageProps {
 	importCategoryOptions?: SelectOption[];
 }

+const pluralize = (count: number, singular: string, plural: string) =>
+	count === 1 ? singular : plural;
+
 export function TransactionsPage({
 	currentUserId,
 	transactions: transactionList,
@@ -206,6 +210,8 @@ export function TransactionsPage({
 	const [convertInstallmentOpen, setConvertInstallmentOpen] = useState(false);
 	const [transactionToConvert, setTransactionToConvert] =
 		useState<TransactionItem | null>(null);
+	const [installmentCount, setInstallmentCount] = useState("2");
+	const [installmentPending, setInstallmentPending] = useState(false);
 	const [convertRecurringOpen, setConvertRecurringOpen] = useState(false);
 	const [transactionToConvertRecurring, setTransactionToConvertRecurring] =
 		useState<TransactionItem | null>(null);
@@ -564,7 +570,9 @@ export function TransactionsPage({
 	};

 	const handleConvertToInstallment = (item: TransactionItem) => {
+		const detectedInstallment = detectInstallmentFromName(item.name);
 		setTransactionToConvert(item);
+		setInstallmentCount(String(detectedInstallment?.installmentCount ?? 2));
 		setConvertInstallmentOpen(true);
 	};

@@ -573,23 +581,31 @@ export function TransactionsPage({
 			return;
 		}

-		const result = await convertTransactionToInstallmentAction({
-			id: transactionToConvert.id,
-		});
-
-		if (!result.success) {
-			toast.error(result.error);
-			throw new Error(result.error);
+		const count = Number(installmentCount);
+		if (!Number.isInteger(count) || count < 2 || count > 60) {
+			toast.error("Informe um parcelamento entre 2 e 60 parcelas.");
+			return;
 		}

-		toast.success(result.message);
-		setConvertInstallmentOpen(false);
-		setTransactionToConvert(null);
-	};
+		try {
+			setInstallmentPending(true);
+			const result = await convertTransactionToInstallmentAction({
+				id: transactionToConvert.id,
+				installmentCount: count,
+			});

-	const conversionPreview = transactionToConvert
-		? detectInstallmentFromName(transactionToConvert.name)
-		: null;
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success(result.message);
+			setConvertInstallmentOpen(false);
+			setTransactionToConvert(null);
+		} finally {
+			setInstallmentPending(false);
+		}
+	};

 	const handleConvertToRecurring = (item: TransactionItem) => {
 		setTransactionToConvertRecurring(item);
@@ -628,6 +644,37 @@ export function TransactionsPage({
 		}
 	};

+	const parsedInstallmentCount = Number(installmentCount);
+	const installmentSummary =
+		transactionToConvert &&
+		Number.isInteger(parsedInstallmentCount) &&
+		parsedInstallmentCount >= 2 &&
+		parsedInstallmentCount <= 60
+			? {
+					total: formatCurrency(Math.abs(transactionToConvert.amount)),
+					installmentValue: formatCurrency(
+						Math.abs(transactionToConvert.amount) / parsedInstallmentCount,
+					),
+					count: parsedInstallmentCount,
+					createdCount: parsedInstallmentCount - 1,
+				}
+			: null;
+
+	const parsedRecurrenceCount = Number(recurrenceCount);
+	const recurringSummary =
+		transactionToConvertRecurring &&
+		Number.isInteger(parsedRecurrenceCount) &&
+		parsedRecurrenceCount >= 2 &&
+		parsedRecurrenceCount <= 60
+			? {
+					amount: formatCurrency(
+						Math.abs(transactionToConvertRecurring.amount),
+					),
+					count: parsedRecurrenceCount,
+					createdCount: parsedRecurrenceCount - 1,
+				}
+			: null;
+
 	const handleAnticipate = (item: TransactionItem) => {
 		setSelectedForAnticipation(item);
 		setAnticipateOpen(true);
@@ -837,7 +884,7 @@ export function TransactionsPage({
 				disabled={!transactionToDelete}
 			/>

-			<ConfirmActionDialog
+			<Dialog
 				open={convertInstallmentOpen && !!transactionToConvert}
 				onOpenChange={(open) => {
 					setConvertInstallmentOpen(open);
@@ -845,17 +892,64 @@ export function TransactionsPage({
 						setTransactionToConvert(null);
 					}
 				}}
-				title="Converter em parcelamento?"
-				description={
-					conversionPreview
-						? `Este lançamento será convertido para "${conversionPreview.name}" como parcela ${conversionPreview.currentInstallment} de ${conversionPreview.installmentCount}. As próximas parcelas serão criadas automaticamente.`
-						: "Este lançamento será convertido em uma série parcelada."
-				}
-				confirmLabel="Converter"
-				pendingLabel="Convertendo..."
-				onConfirm={confirmConvertToInstallment}
-				disabled={!transactionToConvert}
-			/>
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>Converter em parcelamento?</DialogTitle>
+						<DialogDescription>
+							O lançamento atual será mantido como a primeira parcela e os
+							próximos meses serão criados automaticamente.
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="space-y-2">
+						<Label htmlFor="installmentCount">Parcelar em</Label>
+						<Input
+							id="installmentCount"
+							type="number"
+							min={2}
+							max={60}
+							value={installmentCount}
+							onChange={(event) => setInstallmentCount(event.target.value)}
+						/>
+						<p className="text-muted-foreground text-sm">
+							Use o total de parcelas da série, incluindo este lançamento.
+						</p>
+						{installmentSummary ? (
+							<p className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+								Resumo: {installmentSummary.total} será dividido em{" "}
+								{installmentSummary.count} parcelas de aproximadamente{" "}
+								{installmentSummary.installmentValue}. Este lançamento vira a
+								primeira parcela e {installmentSummary.createdCount}{" "}
+								{pluralize(
+									installmentSummary.createdCount,
+									"nova parcela será criada",
+									"novas parcelas serão criadas",
+								)}
+								.
+							</p>
+						) : null}
+					</div>
+
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => setConvertInstallmentOpen(false)}
+							disabled={installmentPending}
+						>
+							Cancelar
+						</Button>
+						<Button
+							type="button"
+							onClick={confirmConvertToInstallment}
+							disabled={installmentPending}
+						>
+							{installmentPending ? "Convertendo..." : "Converter"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>

 			<Dialog
 				open={convertRecurringOpen && !!transactionToConvertRecurring}
@@ -888,6 +982,18 @@ export function TransactionsPage({
 						<p className="text-muted-foreground text-sm">
 							Use o total de meses da série, incluindo este lançamento.
 						</p>
+						{recurringSummary ? (
+							<p className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+								Resumo: este lançamento vira a primeira recorrência e{" "}
+								{recurringSummary.createdCount}{" "}
+								{pluralize(
+									recurringSummary.createdCount,
+									"novo lançamento mensal será criado",
+									"novos lançamentos mensais serão criados",
+								)}{" "}
+								com valor de {recurringSummary.amount}.
+							</p>
+						) : null}
 					</div>

 					<DialogFooter>
--- a/src/features/transactions/components/table/transaction-actions-menu.tsx
+++ b/src/features/transactions/components/table/transaction-actions-menu.tsx
@@ -11,6 +11,7 @@ import {
 	RiRefundLine,
 	RiTimeLine,
 } from "@remixicon/react";
+import { CREDIT_CARD_PAYMENT_METHOD } from "@/features/transactions/lib/constants";
 import { Button } from "@/shared/components/ui/button";
 import {
 	DropdownMenu,
@@ -20,8 +21,6 @@ import {
 	DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu";
 import { REFUND_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
-import { CREDIT_CARD_PAYMENT_METHOD } from "@/features/transactions/lib/constants";
-import { detectInstallmentFromName } from "@/features/transactions/lib/installment-detection";
 import { getConditionIcon } from "@/shared/utils/icons";
 import type { TransactionItem } from "../types";

@@ -66,7 +65,6 @@ export function TransactionActionsMenu({
 	const showInstallmentActions =
 		isOwnData && item.condition === "Parcelado" && item.seriesId;

-	const detectedInstallment = detectInstallmentFromName(item.name);
 	const canConvertToInstallment =
 		isOwnData &&
 		item.paymentMethod === CREDIT_CARD_PAYMENT_METHOD &&
@@ -74,7 +72,6 @@ export function TransactionActionsMenu({
 		!item.splitGroupId &&
 		!item.isDivided &&
 		!item.readonly &&
-		Boolean(detectedInstallment) &&
 		Boolean(onConvertToInstallment);

 	const canConvertToRecurring =
@@ -140,18 +137,14 @@ export function TransactionActionsMenu({
 				) : null}

 				{canConvertToInstallment ? (
-					<DropdownMenuItem
-						onSelect={() => onConvertToInstallment?.(item)}
-					>
+					<DropdownMenuItem onSelect={() => onConvertToInstallment?.(item)}>
 						{getConditionIcon("Parcelado")}
 						Converter em Parcelamento
 					</DropdownMenuItem>
 				) : null}

 				{canConvertToRecurring ? (
-					<DropdownMenuItem
-						onSelect={() => onConvertToRecurring?.(item)}
-					>
+					<DropdownMenuItem onSelect={() => onConvertToRecurring?.(item)}>
 						{getConditionIcon("Recorrente")}
 						Converter em Recorrente
 					</DropdownMenuItem>
--- a/src/features/transactions/components/table/transactions-columns.tsx
+++ b/src/features/transactions/components/table/transactions-columns.tsx
@@ -551,8 +551,12 @@ function buildColumns({
 						onRefund={handleRefund}
 						onAnticipate={handleAnticipate}
 						onViewAnticipationHistory={handleViewAnticipationHistory}
-						onConvertToInstallment={onConvertToInstallment ? handleConvertToInstallment : undefined}
-						onConvertToRecurring={onConvertToRecurring ? handleConvertToRecurring : undefined}
+						onConvertToInstallment={
+							onConvertToInstallment ? handleConvertToInstallment : undefined
+						}
+						onConvertToRecurring={
+							onConvertToRecurring ? handleConvertToRecurring : undefined
+						}
 					/>
 				</div>
 			),