chore: preparar versão 2.7.11

CHANGELOG.md

@@ -5,6 +5,23 @@ Todas as mudanças notáveis deste projeto serão documentadas neste arquivo.
 O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/),
 e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR/).
 
+## [2.7.11] - 2026-06-28
+
+Esta atualização melhora a leitura diária dos lançamentos e deixa a nova visualização opcional, mantendo a possibilidade de voltar ao formato anterior quando a lista agrupada não for a melhor escolha para o usuário.
+
+### Adicionado
+- Preferências: nova opção `Agrupar por data` em Ajustes > Preferências > Lançamentos para alternar entre a lista agrupada por data e a visualização anterior.
+- Lançamentos: a lista agora pode exibir uma barra de data por grupo no formato `TER, 26 JUN 2026`, reunindo os lançamentos daquele dia.
+
+### Alterado
+- Lançamentos: quando o agrupamento por data está ativo, os cards e linhas deixam de repetir a data em cada item, reduzindo ruído visual e mantendo vencimentos de boleto como informação do lançamento.
+- Lançamentos: a preferência de agrupamento por data é aplicada nas listagens principais, extratos de conta, faturas de cartão, detalhes de pessoa e detalhes de categoria.
+- Interface: checkboxes passam a usar um visual mais compacto.
+- Documentação: o README agora cita o agrupamento por data entre as opções de personalização.
+
+### Corrigido
+- Lançamentos: o seletor de data em modais de criação e edição volta a aceitar a data selecionada no calendário.
+
 ## [2.7.10] - 2026-06-27
 
 Esta versão ajusta a experiência de leitura dos lançamentos parcelados após antecipações, permitindo esconder parcelas já liquidadas por antecipação sem perder o histórico quando ele ainda for necessário.

README.md

@@ -10,7 +10,7 @@
 
 > **Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor.
 
-[![Version](https://img.shields.io/badge/version-2.7.10-blue?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-2.7.11-blue?style=flat-square)](CHANGELOG.md)
 [![Next.js](https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js)](https://nextjs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
 [![PostgreSQL](https://img.shields.io/badge/PostgreSQL-blue?style=flat-square&logo=postgresql)](https://www.postgresql.org/)
@@ -89,7 +89,7 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
   <img src="./public/images/companion-preview-light.webp" alt="OpenMonetis Companion" width="300" height="600" />
 </p>
 
-⚙️ **Personalização** — Tema dark/light, modo privacidade, ordem das colunas, exibição de anotações, tamanho máximo de anexos, resumo opcional no modal de lançamento e changelog visual para acompanhar as novidades do app.
+⚙️ **Personalização** — Tema dark/light, modo privacidade, ordem das colunas, agrupamento por data em lançamentos, exibição de anotações, tamanho máximo de anexos, resumo opcional no modal de lançamento e changelog visual para acompanhar as novidades do app.
 
 ### Stack técnica
 
@@ -628,8 +628,8 @@ Antes de começar, leia o [`CLAUDE.md`](CLAUDE.md) — ele documenta a arquitetu
 As validações rodam em pull requests e em cada push na `main`. A publicação só começa quando uma tag SemVer aponta para um commit validado e a versão da tag corresponde ao `package.json` e ao `CHANGELOG.md`.
 
 ```bash
-git tag -a v2.7.10 -m "v2.7.10"
-git push origin v2.7.10
+git tag -a v2.7.11 -m "v2.7.11"
+git push origin v2.7.11
 ```
 
 O workflow da tag valida o código, publica as imagens Docker versionadas e `latest` e, somente depois, cria a GitHub Release com as notas do changelog.

drizzle/0033_demonic_supreme_intelligence.sql

@@ -0,0 +1 @@
+ALTER TABLE "preferencias_usuario" ADD COLUMN "agrupar_lancamentos_por_data" boolean DEFAULT true NOT NULL;

drizzle/meta/_journal.json

@@ -225,6 +225,13 @@
 			"when": 1782569103402,
 			"tag": "0032_bumpy_spencer_smythe",
 			"breakpoints": true
+		},
+		{
+			"idx": 33,
+			"version": "7",
+			"when": 1782685465530,
+			"tag": "0033_demonic_supreme_intelligence",
+			"breakpoints": true
 		}
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openmonetis",
-	"version": "2.7.10",
+	"version": "2.7.11",
 	"private": true,
 	"packageManager": "pnpm@11.1.3",
 	"scripts": {

src/app/(dashboard)/accounts/[accountId]/statement/page.tsx

@@ -235,6 +235,9 @@ export default async function Page({ params, searchParams }: PageProps) {
 					)}
 					noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 					columnOrder={userPreferences?.transactionsColumnOrder ?? null}
+					groupTransactionsByDate={
+						userPreferences?.groupTransactionsByDate ?? true
+					}
 					attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
 				/>
 			</section>

src/app/(dashboard)/cards/[cardId]/invoice/page.tsx

@@ -212,6 +212,9 @@ export default async function Page({ params, searchParams }: PageProps) {
 					allowCreate
 					noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 					columnOrder={userPreferences?.transactionsColumnOrder ?? null}
+					groupTransactionsByDate={
+						userPreferences?.groupTransactionsByDate ?? true
+					}
 					attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
 					defaultCardId={card.id}
 					defaultPaymentMethod="Cartão de crédito"

src/app/(dashboard)/categories/[categoryId]/page.tsx

@@ -105,6 +105,9 @@ export default async function Page({ params, searchParams }: PageProps) {
 				allowCreate={true}
 				noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 				columnOrder={userPreferences?.transactionsColumnOrder ?? null}
+				groupTransactionsByDate={
+					userPreferences?.groupTransactionsByDate ?? true
+				}
 				attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
 			/>
 		</main>

src/app/(dashboard)/payers/[payerId]/page.tsx

@@ -408,6 +408,9 @@ export default async function Page({ params, searchParams }: PageProps) {
 								allowCreate={canEdit}
 								noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 								columnOrder={userPreferences?.transactionsColumnOrder ?? null}
+								groupTransactionsByDate={
+									userPreferences?.groupTransactionsByDate ?? true
+								}
 								attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
 								importPayerOptions={loggedUserOptionSets?.payerOptions}
 								importSplitPayerOptions={

src/app/(dashboard)/settings/page.tsx

@@ -85,6 +85,9 @@ export default async function Page() {
 								showTransactionSummary={
 									userPreferences?.showTransactionSummary ?? true
 								}
+								groupTransactionsByDate={
+									userPreferences?.groupTransactionsByDate ?? true
+								}
 								hideAnticipatedInstallments={
 									userPreferences?.hideAnticipatedInstallments ?? false
 								}

src/app/(dashboard)/transactions/page.tsx

@@ -114,6 +114,9 @@ export default async function Page({ searchParams }: PageProps) {
 					}}
 					noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 					columnOrder={userPreferences?.transactionsColumnOrder ?? null}
+					groupTransactionsByDate={
+						userPreferences?.groupTransactionsByDate ?? true
+					}
 					attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
 				/>
 			</LogoPrefetchProvider>

src/db/schema.ts

@@ -157,6 +157,9 @@ export const userPreferences = pgTable("preferencias_usuario", {
 	showTransactionSummary: boolean("mostrar_resumo_lancamento")
 		.notNull()
 		.default(true),
+	groupTransactionsByDate: boolean("agrupar_lancamentos_por_data")
+		.notNull()
+		.default(true),
 	hideAnticipatedInstallments: boolean("ocultar_parcelas_antecipadas")
 		.notNull()
 		.default(false),

src/features/settings/actions.ts

@@ -69,6 +69,7 @@ const updatePreferencesSchema = z.object({
 	transactionsColumnOrder: z.array(z.string()).nullable(),
 	attachmentMaxSizeMb: z.number().int().min(1).max(100),
 	showTransactionSummary: z.boolean(),
+	groupTransactionsByDate: z.boolean(),
 	hideAnticipatedInstallments: z.boolean(),
 });
 
@@ -585,6 +586,7 @@ export async function updatePreferencesAction(
 					transactionsColumnOrder: validated.transactionsColumnOrder,
 					attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
 					showTransactionSummary: validated.showTransactionSummary,
+					groupTransactionsByDate: validated.groupTransactionsByDate,
 					hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
 					updatedAt: new Date(),
 				})
@@ -597,6 +599,7 @@ export async function updatePreferencesAction(
 				transactionsColumnOrder: validated.transactionsColumnOrder,
 				attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
 				showTransactionSummary: validated.showTransactionSummary,
+				groupTransactionsByDate: validated.groupTransactionsByDate,
 				hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
 			});
 		}

src/features/settings/components/preferences-form.tsx

@@ -43,6 +43,7 @@ interface PreferencesFormProps {
 	transactionsColumnOrder: string[] | null;
 	attachmentMaxSizeMb: number;
 	showTransactionSummary: boolean;
+	groupTransactionsByDate: boolean;
 	hideAnticipatedInstallments: boolean;
 }
 
@@ -88,6 +89,7 @@ export function PreferencesForm({
 	transactionsColumnOrder: initialColumnOrder,
 	attachmentMaxSizeMb: initialAttachmentMaxSizeMb,
 	showTransactionSummary: initialShowTransactionSummary,
+	groupTransactionsByDate: initialGroupTransactionsByDate,
 	hideAnticipatedInstallments: initialHideAnticipatedInstallments,
 }: PreferencesFormProps) {
 	const router = useRouter();
@@ -111,6 +113,9 @@ export function PreferencesForm({
 	const [showTransactionSummary, setShowTransactionSummary] = useState(
 		initialShowTransactionSummary,
 	);
+	const [groupTransactionsByDate, setGroupTransactionsByDate] = useState(
+		initialGroupTransactionsByDate,
+	);
 	const [hideAnticipatedInstallments, setHideAnticipatedInstallments] =
 		useState(initialHideAnticipatedInstallments);
 
@@ -139,6 +144,7 @@ export function PreferencesForm({
 				transactionsColumnOrder: columnOrder,
 				attachmentMaxSizeMb,
 				showTransactionSummary,
+				groupTransactionsByDate,
 				hideAnticipatedInstallments,
 			});
 
@@ -203,6 +209,26 @@ export function PreferencesForm({
 
 				<Separator />
 
+				<section className="flex items-center justify-between max-w-md gap-4">
+					<div className="space-y-2">
+						<Label htmlFor="group-transactions-by-date" className="text-sm">
+							Agrupar por data
+						</Label>
+						<p className="text-sm text-muted-foreground">
+							Mostra uma barra de data acima dos lançamentos daquele dia. Quando
+							desativado, a data volta a aparecer em cada lançamento.
+						</p>
+					</div>
+					<Switch
+						id="group-transactions-by-date"
+						checked={groupTransactionsByDate}
+						onCheckedChange={setGroupTransactionsByDate}
+						disabled={isPending}
+					/>
+				</section>
+
+				<Separator />
+
 				<section className="flex items-center justify-between max-w-md gap-4">
 					<div className="space-y-2">
 						<Label htmlFor="hide-anticipated-installments" className="text-sm">

src/features/settings/queries.ts

@@ -7,6 +7,7 @@ interface UserPreferences {
 	transactionsColumnOrder: string[] | null;
 	attachmentMaxSizeMb: number;
 	showTransactionSummary: boolean;
+	groupTransactionsByDate: boolean;
 	hideAnticipatedInstallments: boolean;
 }
 
@@ -37,6 +38,7 @@ export async function fetchUserPreferences(
 			transactionsColumnOrder: schema.userPreferences.transactionsColumnOrder,
 			attachmentMaxSizeMb: schema.userPreferences.attachmentMaxSizeMb,
 			showTransactionSummary: schema.userPreferences.showTransactionSummary,
+			groupTransactionsByDate: schema.userPreferences.groupTransactionsByDate,
 			hideAnticipatedInstallments:
 				schema.userPreferences.hideAnticipatedInstallments,
 		})

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

@@ -82,6 +82,7 @@ interface TransactionsPageProps {
 	allowCreate?: boolean;
 	noteAsColumn?: boolean;
 	columnOrder?: string[] | null;
+	groupTransactionsByDate?: boolean;
 	defaultCardId?: string | null;
 	defaultPaymentMethod?: string | null;
 	lockCardSelection?: boolean;
@@ -119,6 +120,7 @@ export function TransactionsPage({
 	allowCreate = true,
 	noteAsColumn = false,
 	columnOrder = null,
+	groupTransactionsByDate = true,
 	defaultCardId,
 	defaultPaymentMethod,
 	lockCardSelection,
@@ -745,6 +747,7 @@ export function TransactionsPage({
 				currentUserId={currentUserId}
 				noteAsColumn={noteAsColumn}
 				columnOrder={columnOrder}
+				groupTransactionsByDate={groupTransactionsByDate}
 				payerFilterOptions={payerFilterOptions}
 				categoryFilterOptions={categoryFilterOptions}
 				accountCardFilterOptions={accountCardFilterOptions}

src/features/transactions/components/table/transactions-columns.tsx

@@ -51,6 +51,7 @@ type BuildColumnsArgs = {
 	onConvertToRecurring?: (item: TransactionItem) => void;
 	isSettlementLoading: (id: string) => boolean;
 	showActions: boolean;
+	showDateGroups: boolean;
 	columnOrder?: string[] | null;
 };
 
@@ -115,6 +116,7 @@ function buildColumns({
 	onConvertToRecurring,
 	isSettlementLoading,
 	showActions,
+	showDateGroups,
 }: BuildColumnsArgs): ColumnDef<TransactionItem>[] {
 	const noop = () => undefined;
 	const handleEdit = onEdit ?? noop;
@@ -194,12 +196,14 @@ function buildColumns({
 					<span className="flex items-center gap-2">
 						<EstablishmentLogo name={name} size={32} />
 						<span className="flex flex-col py-0.5">
+							{showDateGroups ? null : (
 								<span className="text-xs text-muted-foreground flex items-center gap-2">
 									{formatDate(purchaseDate)}
 									{dueDateLabel ? (
 										<span className="text-primary">{dueDateLabel}</span>
 									) : null}
 								</span>
+							)}
 							<span className="flex items-center gap-1">
 								<Tooltip>
 									<TooltipTrigger asChild>
@@ -254,6 +258,15 @@ function buildColumns({
 									</Badge>
 								) : null}
 
+								{showDateGroups && dueDateLabel ? (
+									<Badge
+										variant="outline"
+										className="px-2 text-xs text-primary"
+									>
+										{dueDateLabel}
+									</Badge>
+								) : null}
+
 								{isAnticipated && (
 									<Tooltip>
 										<TooltipTrigger asChild>

src/features/transactions/components/table/transactions-mobile-list.tsx

@@ -20,7 +20,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
-import { formatDate } from "@/shared/utils/date";
+import { formatDate, formatDateGroupLabel } from "@/shared/utils/date";
 import { getConditionIcon, getPaymentMethodIcon } from "@/shared/utils/icons";
 import { cn } from "@/shared/utils/ui";
 import type { TransactionItem } from "../types";
@@ -43,6 +43,7 @@ type TransactionsMobileListProps = {
 	onConvertToRecurring?: (item: TransactionItem) => void;
 	isSettlementLoading: (id: string) => boolean;
 	showActions?: boolean;
+	showDateGroups?: boolean;
 };
 
 export function TransactionsMobileList({
@@ -61,7 +62,27 @@ export function TransactionsMobileList({
 	onConvertToRecurring,
 	isSettlementLoading,
 	showActions = true,
+	showDateGroups = true,
 }: TransactionsMobileListProps) {
+	const groups = data.reduce<
+		Array<{ date: string; label: string; items: TransactionItem[] }>
+	>((acc, item) => {
+		const date = item.purchaseDate?.slice(0, 10) ?? "";
+		const existingGroup = acc.find((group) => group.date === date);
+		if (existingGroup) {
+			existingGroup.items.push(item);
+			return acc;
+		}
+
+		acc.push({
+			date,
+			label: formatDateGroupLabel(item.purchaseDate),
+			items: [item],
+		});
+		return acc;
+	}, []);
+
+	if (!showDateGroups) {
 		return (
 			<div className="space-y-3 md:hidden">
 				{data.map((item) => (
@@ -82,14 +103,54 @@ export function TransactionsMobileList({
 						onConvertToRecurring={onConvertToRecurring}
 						isSettlementLoading={isSettlementLoading}
 						showActions={showActions}
+						showDate
 					/>
 				))}
 			</div>
 		);
+	}
+
+	return (
+		<div className="space-y-4 md:hidden">
+			{groups.map((group, groupIndex) => (
+				<section
+					key={`${group.date || group.label}-${groupIndex}`}
+					className="space-y-2"
+				>
+					<div className="rounded-md border bg-muted/60 px-3 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground">
+						{group.label}
+					</div>
+					<div className="space-y-3">
+						{group.items.map((item) => (
+							<TransactionMobileCard
+								key={item.id}
+								item={item}
+								currentUserId={currentUserId}
+								onEdit={onEdit}
+								onCopy={onCopy}
+								onImport={onImport}
+								onConfirmDelete={onConfirmDelete}
+								onViewDetails={onViewDetails}
+								onRefund={onRefund}
+								onToggleSettlement={onToggleSettlement}
+								onAnticipate={onAnticipate}
+								onViewAnticipationHistory={onViewAnticipationHistory}
+								onConvertToInstallment={onConvertToInstallment}
+								onConvertToRecurring={onConvertToRecurring}
+								isSettlementLoading={isSettlementLoading}
+								showActions={showActions}
+							/>
+						))}
+					</div>
+				</section>
+			))}
+		</div>
+	);
 }
 
 type TransactionMobileCardProps = Omit<TransactionsMobileListProps, "data"> & {
 	item: TransactionItem;
+	showDate?: boolean;
 };
 
 function TransactionMobileCard({
@@ -108,6 +169,7 @@ function TransactionMobileCard({
 	onConvertToRecurring,
 	isSettlementLoading,
 	showActions = true,
+	showDate = false,
 }: TransactionMobileCardProps) {
 	const installmentBadge =
 		item.currentInstallment && item.installmentCount
@@ -156,10 +218,12 @@ function TransactionMobileCard({
 								{item.name}
 							</h3>
 							<div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+								{showDate ? (
 									<span className="inline-flex items-center gap-1">
 										<RiCalendarEventLine className="size-3.5" aria-hidden />
 										{formatDate(item.purchaseDate)}
 									</span>
+								) : null}
 								{dueDateLabel ? (
 									<span className="font-medium text-primary">
 										{dueDateLabel}

src/features/transactions/components/table/transactions-table.tsx

@@ -9,13 +9,14 @@ import {
 	getCoreRowModel,
 	getPaginationRowModel,
 	getSortedRowModel,
+	type Row,
 	type RowSelectionState,
 	type SortingState,
 	useReactTable,
 	type VisibilityState,
 } from "@tanstack/react-table";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { type ReactNode, useMemo, useState } from "react";
+import { Fragment, type ReactNode, useMemo, useState } from "react";
 import type {
 	TransactionsExportContext,
 	TransactionsPaginationState,
@@ -37,6 +38,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
+import { formatDateGroupLabel } from "@/shared/utils/date";
 import { cn } from "@/shared/utils/ui";
 import { TransactionsExport } from "../transactions-export";
 import type {
@@ -79,6 +81,7 @@ type TransactionsTableProps = {
 	isSettlementLoading?: (id: string) => boolean;
 	showActions?: boolean;
 	showFilters?: boolean;
+	groupTransactionsByDate?: boolean;
 };
 
 export function TransactionsTable({
@@ -110,6 +113,7 @@ export function TransactionsTable({
 	isSettlementLoading,
 	showActions = true,
 	showFilters = true,
+	groupTransactionsByDate = true,
 }: TransactionsTableProps) {
 	const router = useRouter();
 	const pathname = usePathname();
@@ -145,12 +149,14 @@ export function TransactionsTable({
 				onViewAnticipationHistory,
 				isSettlementLoading: isSettlementLoading ?? (() => false),
 				showActions,
+				showDateGroups: groupTransactionsByDate,
 				columnOrder: columnOrderPreference,
 			}),
 		[
 			currentUserId,
 			noteAsColumn,
 			columnOrderPreference,
+			groupTransactionsByDate,
 			onEdit,
 			onCopy,
 			onImport,
@@ -191,6 +197,24 @@ export function TransactionsTable({
 
 	const rowModel = table.getRowModel();
 	const hasRows = rowModel.rows.length > 0;
+	const groupedRows = rowModel.rows.reduce<
+		Array<{ date: string; label: string; rows: Row<TransactionItem>[] }>
+	>((acc, row) => {
+		const date = row.original.purchaseDate?.slice(0, 10) ?? "";
+		const existingGroup = acc.find((group) => group.date === date);
+		if (existingGroup) {
+			existingGroup.rows.push(row);
+			return acc;
+		}
+
+		acc.push({
+			date,
+			label: formatDateGroupLabel(row.original.purchaseDate),
+			rows: [row],
+		});
+		return acc;
+	}, []);
+	const visibleColumnCount = table.getVisibleLeafColumns().length;
 	const totalRows = isServerPaginated
 		? (serverPagination?.totalItems ?? 0)
 		: table.getCoreRowModel().rows.length;
@@ -275,6 +299,25 @@ export function TransactionsTable({
 
 	const showTopControls =
 		Boolean(createSlot) || Boolean(onMassAdd) || showFilters;
+	const renderTransactionRow = (row: Row<TransactionItem>) => (
+		<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/3 hover:bg-destructive/5"
+					: undefined,
+			)}
+		>
+			{row.getVisibleCells().map((cell) => (
+				<TableCell key={cell.id}>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</TableCell>
+			))}
+		</TableRow>
+	);
 
 	return (
 		<TooltipProvider>
@@ -366,7 +409,7 @@ export function TransactionsTable({
 			) : null}
 
 			<Card className="py-2">
-				<CardContent className="px-2 py-4 sm:px-4">
+				<CardContent className="px-2 sm:px-4">
 					{hasRows ? (
 						<>
 							<TransactionsMobileList
@@ -383,6 +426,7 @@ export function TransactionsTable({
 								onViewAnticipationHistory={onViewAnticipationHistory}
 								isSettlementLoading={isSettlementLoading ?? (() => false)}
 								showActions={showActions}
+								showDateGroups={groupTransactionsByDate}
 							/>
 
 							<div className="hidden overflow-x-auto md:block">
@@ -407,28 +451,23 @@ export function TransactionsTable({
 										))}
 									</TableHeader>
 									<TableBody>
-										{rowModel.rows.map((row) => (
-											<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/3 hover:bg-destructive/5"
-														: undefined,
-												)}
+										{groupTransactionsByDate
+											? groupedRows.map((group, groupIndex) => (
+													<Fragment
+														key={`${group.date || group.label}-${groupIndex}`}
 													>
-												{row.getVisibleCells().map((cell) => (
-													<TableCell key={cell.id}>
-														{flexRender(
-															cell.column.columnDef.cell,
-															cell.getContext(),
-														)}
+														<TableRow className="border-y bg-muted/40 hover:bg-muted/60">
+															<TableCell
+																colSpan={visibleColumnCount}
+																className="h-9 px-3 py-2 text-xs font-semibold text-muted-foreground"
+															>
+																{group.label}
 															</TableCell>
-												))}
 														</TableRow>
-										))}
+														{group.rows.map(renderTransactionRow)}
+													</Fragment>
+												))
+											: rowModel.rows.map(renderTransactionRow)}
 									</TableBody>
 								</Table>
 							</div>

src/shared/components/ui/calendar.tsx

@@ -197,6 +197,7 @@ function CalendarDayButton({
 	return (
 		<Button
 			ref={ref}
+			type="button"
 			variant="ghost"
 			size="icon"
 			data-day={day.date.toLocaleDateString()}

src/shared/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ function Checkbox({
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				"peer border-input dark:bg-input/40 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-3.5 shrink-0 rounded border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}

src/shared/components/ui/date-picker.tsx

@@ -148,7 +148,7 @@ export function DatePicker({
 				required={required}
 				disabled={disabled}
 			/>
-			<Popover open={open} onOpenChange={setOpen}>
+			<Popover modal open={open} onOpenChange={setOpen}>
 				<PopoverTrigger asChild>
 					<Button
 						type="button"

src/shared/utils/date.ts

@@ -331,6 +331,45 @@ export function formatDate(value: string | Date | null | undefined): string {
 		.replace(" de", "");
 }
 
+/**
+ * Formats a date-only value as a compact group label.
+ * @example
+ * formatDateGroupLabel("2026-06-26") // "SEX, 26 JUN 2026"
+ */
+export function formatDateGroupLabel(
+	value: string | Date | null | undefined,
+): string {
+	const dateString = toDateOnlyString(value);
+	if (!dateString) {
+		return "—";
+	}
+
+	const parsed = parseUtcDateString(dateString);
+	if (!parsed) {
+		return "—";
+	}
+
+	const parts = new Intl.DateTimeFormat("pt-BR", {
+		weekday: "short",
+		day: "2-digit",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC",
+	}).formatToParts(parsed);
+	const weekday = parts.find((part) => part.type === "weekday")?.value;
+	const day = parts.find((part) => part.type === "day")?.value;
+	const month = parts.find((part) => part.type === "month")?.value;
+	const year = parts.find((part) => part.type === "year")?.value;
+
+	if (!weekday || !day || !month || !year) {
+		return "—";
+	}
+
+	return `${weekday.replace(".", "").toUpperCase()}, ${day} ${month
+		.replace(".", "")
+		.toUpperCase()} ${year}`;
+}
+
 /**
  * Formats a date-only value (YYYY-MM-DD) using UTC to preserve the civil day
  */