From df3d0134be3894de67af2106d1bb2c67f60decd2 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Sun, 15 Mar 2026 23:23:26 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20melhora=20a=20UX=20de=20lan=C3=A7amento?=
 =?UTF-8?q?s=20e=20a=C3=A7=C3=B5es=20r=C3=A1pidas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../accounts/components/accounts-page.tsx     |   4 +-
 .../budgets/components/budgets-page.tsx       |   4 +-
 src/features/calendar/components/day-cell.tsx |   2 +-
 src/features/cards/components/card-item.tsx   |   2 +-
 src/features/cards/components/cards-page.tsx  |   4 +-
 .../categories/components/categories-page.tsx |   4 +-
 .../components/dashboard-grid-editable.tsx    |   6 +-
 src/features/notes/components/notes-page.tsx  |   4 +-
 .../payers/components/payers-page.tsx         |   4 +-
 .../components/cards/card-top-expenses.tsx    |   2 +-
 .../settings/components/api-tokens-form.tsx   |   4 +-
 .../settings/components/passkeys-form.tsx     |   6 +-
 .../components/dialogs/mass-add-dialog.tsx    |   4 +-
 .../payment-method-section.tsx                |   2 +-
 .../components/page/transactions-page.tsx     |   6 +-
 .../components/shared/establishment-input.tsx |   1 +
 .../components/table/transactions-table.tsx   | 150 ++++++++++++------
 17 files changed, 137 insertions(+), 72 deletions(-)

diff --git a/src/features/accounts/components/accounts-page.tsx b/src/features/accounts/components/accounts-page.tsx
index 2f86750..03ac528 100644
--- a/src/features/accounts/components/accounts-page.tsx
+++ b/src/features/accounts/components/accounts-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RiAddCircleFill, RiBankLine } from "@remixicon/react";
+import { RiAddFill, RiBankLine } from "@remixicon/react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -176,7 +176,7 @@ export function AccountsPage({
 						logoOptions={logoOptions}
 						trigger={
 							<Button className="w-full sm:w-auto">
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Nova conta
 							</Button>
 						}
diff --git a/src/features/budgets/components/budgets-page.tsx b/src/features/budgets/components/budgets-page.tsx
index 6d897e0..0c5eaea 100644
--- a/src/features/budgets/components/budgets-page.tsx
+++ b/src/features/budgets/components/budgets-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RiAddCircleFill, RiFileCopyLine, RiFundsLine } from "@remixicon/react";
+import { RiAddFill, RiFileCopyLine, RiFundsLine } from "@remixicon/react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
@@ -115,7 +115,7 @@ export function BudgetsPage({
 								disabled={categories.length === 0}
 								className="w-full sm:w-auto"
 							>
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Novo orçamento
 							</Button>
 						}
diff --git a/src/features/calendar/components/day-cell.tsx b/src/features/calendar/components/day-cell.tsx
index 83c5eb9..634f5a8 100644
--- a/src/features/calendar/components/day-cell.tsx
+++ b/src/features/calendar/components/day-cell.tsx
@@ -143,7 +143,7 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
 			onClick={() => onSelect(day)}
 			onKeyDown={handleKeyDown}
 			className={cn(
-				"flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent bg-card/80 p-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-primary/10",
+				"flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent bg-card/80 p-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-accent transition-colors duration-300",
 				!day.isCurrentMonth && "opacity-60",
 				day.isToday && "border-primary/70 bg-primary/5 hover:border-primary",
 			)}
diff --git a/src/features/cards/components/card-item.tsx b/src/features/cards/components/card-item.tsx
index 7af069d..072bdc0 100644
--- a/src/features/cards/components/card-item.tsx
+++ b/src/features/cards/components/card-item.tsx
@@ -185,7 +185,7 @@ export function CardItem({
 					)}
 				</div>
 
-				<div className="flex items-center justify-between border-y border-dashed py-3 text-xs font-medium text-muted-foreground sm:text-sm">
+				<div className="flex items-center justify-between border-y py-3 text-xs font-medium text-muted-foreground sm:text-sm">
 					<span>
 						Fecha dia{" "}
 						<span className="font-semibold text-foreground">
diff --git a/src/features/cards/components/cards-page.tsx b/src/features/cards/components/cards-page.tsx
index e55cc03..406a7ce 100644
--- a/src/features/cards/components/cards-page.tsx
+++ b/src/features/cards/components/cards-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RiAddCircleFill, RiBankCard2Line } from "@remixicon/react";
+import { RiAddFill, RiBankCard2Line } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -164,7 +164,7 @@ export function CardsPage({
 						logoOptions={logoOptions}
 						trigger={
 							<Button className="w-full sm:w-auto">
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Novo cartão
 							</Button>
 						}
diff --git a/src/features/categories/components/categories-page.tsx b/src/features/categories/components/categories-page.tsx
index 901bf28..e724b07 100644
--- a/src/features/categories/components/categories-page.tsx
+++ b/src/features/categories/components/categories-page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-	RiAddCircleFill,
+	RiAddFill,
 	RiDeleteBin5Line,
 	RiExternalLinkLine,
 	RiPencilLine,
@@ -127,7 +127,7 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 						defaultType={activeType}
 						trigger={
 							<Button className="w-full sm:w-auto">
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Nova categoria
 							</Button>
 						}
diff --git a/src/features/dashboard/components/dashboard-grid-editable.tsx b/src/features/dashboard/components/dashboard-grid-editable.tsx
index 8e4d7a9..b0a2d56 100644
--- a/src/features/dashboard/components/dashboard-grid-editable.tsx
+++ b/src/features/dashboard/components/dashboard-grid-editable.tsx
@@ -16,7 +16,7 @@ import {
 	sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
 import {
-	RiAddCircleFill,
+	RiAddFill,
 	RiCheckLine,
 	RiCloseLine,
 	RiDragMove2Line,
@@ -218,7 +218,7 @@ export function DashboardGridEditable({
 										className="h-12 w-full min-w-0 flex-col justify-center gap-0.5 px-1.5 text-sm whitespace-normal sm:h-8 sm:w-auto sm:flex-row sm:gap-2 sm:px-3 sm:whitespace-nowrap"
 									>
 										<span className="flex items-center gap-0.5">
-											<RiAddCircleFill className="size-3.5 shrink-0 text-success/80" />
+											<RiAddFill className="size-3.5 shrink-0 text-success/80" />
 										</span>
 										<span className="sm:hidden">Receita</span>
 										<span className="hidden sm:inline">Nova receita</span>
@@ -243,7 +243,7 @@ export function DashboardGridEditable({
 										className="h-12 w-full min-w-0 flex-col justify-center gap-0.5 px-1.5 text-sm whitespace-normal sm:h-8 sm:w-auto sm:flex-row sm:gap-2 sm:px-3 sm:whitespace-nowrap"
 									>
 										<span className="flex items-center gap-0.5">
-											<RiAddCircleFill className="size-3.5 shrink-0 text-destructive/80" />
+											<RiAddFill className="size-3.5 shrink-0 text-destructive/80" />
 										</span>
 										<span className="sm:hidden">Despesa</span>
 										<span className="hidden sm:inline">Nova despesa</span>
diff --git a/src/features/notes/components/notes-page.tsx b/src/features/notes/components/notes-page.tsx
index 699cd23..0101d5d 100644
--- a/src/features/notes/components/notes-page.tsx
+++ b/src/features/notes/components/notes-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RiAddCircleFill, RiTodoLine } from "@remixicon/react";
+import { RiAddFill, RiTodoLine } from "@remixicon/react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { archiveNoteAction, deleteNoteAction } from "@/features/notes/actions";
@@ -208,7 +208,7 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 						onOpenChange={handleCreateOpenChange}
 						trigger={
 							<Button className="w-full sm:w-auto">
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Nova anotação
 							</Button>
 						}
diff --git a/src/features/payers/components/payers-page.tsx b/src/features/payers/components/payers-page.tsx
index c16397f..77247d4 100644
--- a/src/features/payers/components/payers-page.tsx
+++ b/src/features/payers/components/payers-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RiAddCircleFill } from "@remixicon/react";
+import { RiAddFill } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
@@ -126,7 +126,7 @@ export function PayersPage({ payers, avatarOptions }: PayersPageProps) {
 						avatarOptions={avatarOptions}
 						trigger={
 							<Button className="w-full sm:w-auto">
-								<RiAddCircleFill className="size-4" />
+								<RiAddFill className="size-4" />
 								Novo pagador
 							</Button>
 						}
diff --git a/src/features/reports/components/cards/card-top-expenses.tsx b/src/features/reports/components/cards/card-top-expenses.tsx
index 551b080..4cb95de 100644
--- a/src/features/reports/components/cards/card-top-expenses.tsx
+++ b/src/features/reports/components/cards/card-top-expenses.tsx
@@ -77,7 +77,7 @@ export function CardTopExpenses({ data }: CardTopExpensesProps) {
 											</span>
 											{expense.category && (
 												<Badge
-													variant="secondary"
+													variant="outline"
 													className="h-5 max-w-full px-1.5 py-0 text-xs truncate"
 												>
 													{expense.category}
diff --git a/src/features/settings/components/api-tokens-form.tsx b/src/features/settings/components/api-tokens-form.tsx
index d6cdb48..8307105 100644
--- a/src/features/settings/components/api-tokens-form.tsx
+++ b/src/features/settings/components/api-tokens-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-	RiAddCircleFill,
+	RiAddFill,
 	RiAlertLine,
 	RiCheckLine,
 	RiDeleteBinLine,
@@ -154,7 +154,7 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
 				>
 					<DialogTrigger asChild>
 						<Button size="sm">
-							<RiAddCircleFill className="h-4 w-4 mr-1" />
+							<RiAddFill className="h-4 w-4 mr-1" />
 							Novo Token
 						</Button>
 					</DialogTrigger>
diff --git a/src/features/settings/components/passkeys-form.tsx b/src/features/settings/components/passkeys-form.tsx
index 018eea7..615e301 100644
--- a/src/features/settings/components/passkeys-form.tsx
+++ b/src/features/settings/components/passkeys-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-	RiAddCircleFill,
+	RiAddFill,
 	RiAlertLine,
 	RiDeleteBinLine,
 	RiFingerprintLine,
@@ -210,8 +210,8 @@ export function PasskeysForm() {
 				>
 					<DialogTrigger asChild>
 						<Button size="sm" disabled={isMutating || !passkeySupported}>
-							<RiAddCircleFill className="h-4 w-4 mr-1" />
-							Adicionar
+							<RiAddFill className="h-4 w-4 mr-1" />
+							Nova Passkey
 						</Button>
 					</DialogTrigger>
 					<DialogContent>
diff --git a/src/features/transactions/components/dialogs/mass-add-dialog.tsx b/src/features/transactions/components/dialogs/mass-add-dialog.tsx
index 5671809..80d511d 100644
--- a/src/features/transactions/components/dialogs/mass-add-dialog.tsx
+++ b/src/features/transactions/components/dialogs/mass-add-dialog.tsx
@@ -69,7 +69,7 @@ function InlinePeriodPicker({
 
 	return (
 		<div className="-mt-1">
-			<span className="text-xs text-muted-foreground">Invoice de </span>
+			<span className="text-xs text-muted-foreground">Fatura de </span>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger asChild>
 					<button
@@ -554,7 +554,7 @@ export function MassAddDialog({
 																);
 																return selectedOption ? (
 																	<PayerSelectContent
-																		label={selectedOption.label}
+																		label={selectedOption.label.split(" ")[0]}
 																		avatarUrl={selectedOption.avatarUrl}
 																	/>
 																) : null;
diff --git a/src/features/transactions/components/dialogs/transaction-dialog/payment-method-section.tsx b/src/features/transactions/components/dialogs/transaction-dialog/payment-method-section.tsx
index a445f7f..b170a96 100644
--- a/src/features/transactions/components/dialogs/transaction-dialog/payment-method-section.tsx
+++ b/src/features/transactions/components/dialogs/transaction-dialog/payment-method-section.tsx
@@ -39,7 +39,7 @@ function InlinePeriodPicker({
 
 	return (
 		<div className="ml-1">
-			<span className="text-xs text-muted-foreground">Invoice de </span>
+			<span className="text-xs text-muted-foreground">Fatura de </span>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger asChild>
 					<button
diff --git a/src/features/transactions/components/page/transactions-page.tsx b/src/features/transactions/components/page/transactions-page.tsx
index 102b3cd..71d77cf 100644
--- a/src/features/transactions/components/page/transactions-page.tsx
+++ b/src/features/transactions/components/page/transactions-page.tsx
@@ -172,7 +172,11 @@ export function TransactionsPage({
 				throw new Error(result.error);
 			}
 
-			toast.success(result.message);
+			toast.success(
+				nextValue
+					? `"${item.name}" marcado como pago`
+					: `"${item.name}" desmarcado`,
+			);
 		} catch (error) {
 			const message =
 				error instanceof Error
diff --git a/src/features/transactions/components/shared/establishment-input.tsx b/src/features/transactions/components/shared/establishment-input.tsx
index 41457d4..2df4ff3 100644
--- a/src/features/transactions/components/shared/establishment-input.tsx
+++ b/src/features/transactions/components/shared/establishment-input.tsx
@@ -77,6 +77,7 @@ export function EstabelecimentoInput({
 						required={required}
 						maxLength={maxLength}
 						autoComplete="off"
+						className={estabelecimentos.length > 0 ? "pr-8" : undefined}
 					/>
 					{estabelecimentos.length > 0 && (
 						<RiSearchLine className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
diff --git a/src/features/transactions/components/table/transactions-table.tsx b/src/features/transactions/components/table/transactions-table.tsx
index 30ce2cf..af6032a 100644
--- a/src/features/transactions/components/table/transactions-table.tsx
+++ b/src/features/transactions/components/table/transactions-table.tsx
@@ -1,9 +1,16 @@
 "use client";
 import {
 	RiAddCircleFill,
-	RiAddCircleLine,
+	RiAddFill,
+	RiArrowLeftDoubleLine,
 	RiArrowLeftRightLine,
+	RiArrowLeftSLine,
+	RiArrowRightDoubleLine,
+	RiArrowRightSLine,
+	RiBankCard2Line,
 	RiChat1Line,
+	RiCheckboxBlankCircleLine,
+	RiCheckboxCircleFill,
 	RiCheckLine,
 	RiDeleteBin5Line,
 	RiFileCopyLine,
@@ -12,8 +19,6 @@ import {
 	RiHistoryLine,
 	RiMoreFill,
 	RiPencilLine,
-	RiThumbUpFill,
-	RiThumbUpLine,
 	RiTimeLine,
 } from "@remixicon/react";
 import {
@@ -271,7 +276,7 @@ const buildColumns = ({
 						{!noteAsColumn && hasNote ? (
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<span className="inline-flex rounded-full p-1 hover:bg-muted/60">
+									<span className="inline-flex rounded-full p-1 hover:bg-accent transition-colors duration-300">
 										<RiChat1Line
 											className="h-4 w-4 text-muted-foreground"
 											aria-hidden
@@ -544,32 +549,49 @@ const buildColumns = ({
 							paymentMethod === "Cartão de débito" ||
 							paymentMethod === "Transferência bancária" ||
 							paymentMethod === "Pré-Pago | VR/VA";
+
+						if (!canToggleSettlement)
+							return (
+								<span className="flex size-7 shrink-0 items-center justify-center">
+									<RiBankCard2Line className="size-4 text-muted-foreground/30" />
+								</span>
+							);
+
 						const readOnly = row.original.readonly;
 						const loading = isSettlementLoading(row.original.id);
 						const settled = Boolean(row.original.isSettled);
-						const Icon = settled ? RiThumbUpFill : RiThumbUpLine;
 
 						return (
-							<Button
-								variant={"outline"}
-								size="icon-sm"
-								onClick={() => handleToggleSettlement(row.original)}
-								disabled={loading || readOnly || !canToggleSettlement}
-								className={cn(
-									"border-none",
-									!canToggleSettlement && "opacity-70 ",
-									settled && "border-none",
-								)}
-							>
-								{loading ? (
-									<Spinner className="size-4" />
-								) : (
-									<Icon className={cn("size-4", settled && "text-success")} />
-								)}
-								<span className="sr-only">
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon-sm"
+										onClick={() => handleToggleSettlement(row.original)}
+										disabled={loading || readOnly}
+										className={cn(
+											"transition-colors",
+											settled
+												? "bg-success/10 text-success hover:bg-success/20 hover:text-success"
+												: "text-muted-foreground hover:text-foreground",
+										)}
+									>
+										{loading ? (
+											<Spinner className="size-4" />
+										) : settled ? (
+											<RiCheckboxCircleFill className="size-4" />
+										) : (
+											<RiCheckboxBlankCircleLine className="size-4" />
+										)}
+										<span className="sr-only">
+											{settled ? "Desfazer pagamento" : "Marcar como pago"}
+										</span>
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent side="top">
 									{settled ? "Desfazer pagamento" : "Marcar como pago"}
-								</span>
-							</Button>
+								</TooltipContent>
+							</Tooltip>
 						);
 					})()}
 
@@ -866,14 +888,14 @@ export function TransactionsTable({
 										onClick={() => onCreate("Receita")}
 										className="w-full sm:w-auto"
 									>
-										<RiAddCircleFill className="size-4" />
+										<RiAddFill className="size-4" />
 										Nova Receita
 									</Button>
 									<Button
 										onClick={() => onCreate("Despesa")}
 										className="w-full sm:w-auto"
 									>
-										<RiAddCircleFill className="size-4" />
+										<RiAddFill className="size-4" />
 										Nova Despesa
 									</Button>
 								</>
@@ -887,7 +909,7 @@ export function TransactionsTable({
 											size="icon"
 											className="hidden size-9 sm:inline-flex"
 										>
-											<RiAddCircleLine className="size-4" />
+											<RiAddCircleFill className="size-4" />
 											<span className="sr-only">
 												Adicionar múltiplos lançamentos
 											</span>
@@ -1014,7 +1036,17 @@ export function TransactionsTable({
 									</TableHeader>
 									<TableBody>
 										{rowModel.rows.map((row) => (
-											<TableRow key={row.id}>
+											<TableRow
+												key={row.id}
+												className={cn(
+													row.original.paymentMethod === "Boleto" &&
+														row.original.dueDate &&
+														!row.original.isSettled &&
+														new Date(row.original.dueDate) < new Date()
+														? "bg-destructive/[0.03] hover:bg-destructive/[0.05]"
+														: undefined,
+												)}
+											>
 												{row.getVisibleCells().map((cell) => (
 													<TableCell key={cell.id}>
 														{flexRender(
@@ -1032,7 +1064,7 @@ export function TransactionsTable({
 							<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
 								<div className="flex items-center gap-2">
 									<span className="text-sm text-muted-foreground">
-										Exibindo {rowModel.rows.length} de {totalRows} lançamentos
+										{totalRows} lançamentos
 									</span>
 									<Select
 										value={pagination.pageSize.toString()}
@@ -1055,22 +1087,50 @@ export function TransactionsTable({
 									</Select>
 								</div>
 								<div className="flex items-center gap-2">
-									<Button
-										variant="outline"
-										size="sm"
-										onClick={() => table.previousPage()}
-										disabled={!table.getCanPreviousPage()}
-									>
-										Anterior
-									</Button>
-									<Button
-										variant="outline"
-										size="sm"
-										onClick={() => table.nextPage()}
-										disabled={!table.getCanNextPage()}
-									>
-										Próximo
-									</Button>
+									<span className="text-sm text-muted-foreground">
+										Página {table.getState().pagination.pageIndex + 1} de{" "}
+										{Math.max(table.getPageCount(), 1)}
+									</span>
+									<div className="flex items-center gap-1">
+										<Button
+											variant="outline"
+											size="icon-sm"
+											onClick={() => table.setPageIndex(0)}
+											disabled={!table.getCanPreviousPage()}
+											aria-label="Primeira página"
+										>
+											<RiArrowLeftDoubleLine className="size-4" />
+										</Button>
+										<Button
+											variant="outline"
+											size="icon-sm"
+											onClick={() => table.previousPage()}
+											disabled={!table.getCanPreviousPage()}
+											aria-label="Página anterior"
+										>
+											<RiArrowLeftSLine className="size-4" />
+										</Button>
+										<Button
+											variant="outline"
+											size="icon-sm"
+											onClick={() => table.nextPage()}
+											disabled={!table.getCanNextPage()}
+											aria-label="Próxima página"
+										>
+											<RiArrowRightSLine className="size-4" />
+										</Button>
+										<Button
+											variant="outline"
+											size="icon-sm"
+											onClick={() =>
+												table.setPageIndex(table.getPageCount() - 1)
+											}
+											disabled={!table.getCanNextPage()}
+											aria-label="Última página"
+										>
+											<RiArrowRightDoubleLine className="size-4" />
+										</Button>
+									</div>
 								</div>
 							</div>
 						</>