Merge pull request #22 from felipegcoutinho/chore/pending-changes-2026-02-28

chore: atualizações de dashboard, inbox e versão 1.7.5

CHANGELOG.md

@@ -5,6 +5,24 @@ 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/).
 
+## [1.7.5] - 2026-02-28
+
+### Adicionado
+
+- Inbox de pré-lançamentos: ações para excluir item individual (processado/descartado) e limpar itens em lote por status
+
+### Alterado
+
+- Página de categorias: layout migrado de cards para tabela com link direto para detalhe, ícone da categoria e ações inline de editar/remover
+- Widgets de boletos e faturas no dashboard: cards e diálogos redesenhados, com destaque visual para status e valores
+- Estados de vencimento em boletos e faturas: quando vencidos e não pagos, exibem indicação "Atrasado / Pagar"
+- Notificações de faturas: exibição de logo do cartão (quando disponível) e atualização dos ícones da listagem
+
+### Corrigido
+
+- `parseDueDate` no widget de faturas agora retorna também a data parseada com fallback seguro (`date: null`) para evitar comparações inválidas
+- Formatação do `components/dashboard/invoices-widget.tsx` ajustada para passar no lint
+
 ## [1.7.4] - 2026-02-28
 
 ### Alterado
@@ -334,4 +352,3 @@ e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR
 
 - Atualização de dependências
 - Aplicada formatação no código
-

app/(dashboard)/categorias/loading.tsx

@@ -1,3 +1,4 @@
+import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function CategoriasLoading() {
@@ -21,32 +22,40 @@ export default function CategoriasLoading() {
 						))}
 					</div>
 
-					{/* Grid de cards de categorias */}
+					{/* Tabela de categorias */}
-					<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+					<Card className="py-2">
-						{Array.from({ length: 8 }).map((_, i) => (
+						<CardContent className="px-2 py-4 sm:px-4">
-							<div key={i} className="rounded-2xl border p-6 space-y-4">
+							<div className="space-y-0">
-								{/* Ícone + Nome */}
+								{/* Header da tabela */}
-								<div className="flex items-center gap-3">
+								<div className="flex items-center gap-4 border-b px-2 pb-3">
-									<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-5 rounded bg-foreground/10" />
-									<div className="flex-1 space-y-2">
+									<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
-										<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
+									<div className="flex-1" />
-										<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
+								</div>
+
+								{/* Linhas da tabela */}
+								{Array.from({ length: 8 }).map((_, i) => (
+									<div
+										key={i}
+										className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0"
+									>
+										<Skeleton className="size-8 rounded-lg bg-foreground/10" />
+										<Skeleton
+											className="h-4 rounded bg-foreground/10"
+											style={{ width: `${100 + (i % 4) * 30}px` }}
+										/>
+										<div className="flex-1" />
+										<div className="flex items-center gap-3">
+											<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
+											<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
+											<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
+										</div>
 									</div>
-								</div>
+								))}
-
-								{/* Descrição */}
-								{i % 3 === 0 && (
-									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-								)}
-
-								{/* Botões de ação */}
-								<div className="flex gap-2 pt-2 border-t">
-									<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
-								</div>
 							</div>
-						))}
+						</CardContent>
-					</div>
+					</Card>
 				</div>
 			</div>
 		</main>

app/(dashboard)/orcamentos/layout.tsx

@@ -1,4 +1,4 @@
-import { RiFundsLine } from "@remixicon/react";
+import { RiBarChart2Line } from "@remixicon/react";
 import PageDescription from "@/components/page-description";
 
 export const metadata = {
@@ -13,7 +13,7 @@ export default function RootLayout({
 	return (
 		<section className="space-y-6 pt-4">
 			<PageDescription
-				icon={<RiFundsLine />}
+				icon={<RiBarChart2Line />}
 				title="Orçamentos"
 				subtitle="Gerencie seus orçamentos mensais por categorias. Acompanhe o progresso do seu orçamento e faça ajustes conforme necessário."
 			/>

app/(dashboard)/pre-lancamentos/actions.ts

@@ -21,6 +21,14 @@ const bulkDiscardSchema = z.object({
 	inboxItemIds: z.array(z.string().uuid()).min(1, "Selecione ao menos um item"),
 });
 
+const deleteInboxSchema = z.object({
+	inboxItemId: z.string().uuid("ID do item inválido"),
+});
+
+const bulkDeleteInboxSchema = z.object({
+	status: z.enum(["processed", "discarded"]),
+});
+
 function revalidateInbox() {
 	revalidatePath("/pre-lancamentos");
 	revalidatePath("/lancamentos");
@@ -157,3 +165,78 @@ export async function bulkDiscardInboxItemsAction(
 		return handleActionError(error);
 	}
 }
+
+export async function deleteInboxItemAction(
+	input: z.infer<typeof deleteInboxSchema>,
+): Promise<ActionResult> {
+	try {
+		const user = await getUser();
+		const data = deleteInboxSchema.parse(input);
+
+		const [item] = await db
+			.select({ status: preLancamentos.status })
+			.from(preLancamentos)
+			.where(
+				and(
+					eq(preLancamentos.id, data.inboxItemId),
+					eq(preLancamentos.userId, user.id),
+				),
+			)
+			.limit(1);
+
+		if (!item) {
+			return { success: false, error: "Item não encontrado." };
+		}
+
+		if (item.status === "pending") {
+			return {
+				success: false,
+				error: "Não é possível excluir itens pendentes.",
+			};
+		}
+
+		await db
+			.delete(preLancamentos)
+			.where(
+				and(
+					eq(preLancamentos.id, data.inboxItemId),
+					eq(preLancamentos.userId, user.id),
+				),
+			);
+
+		revalidateInbox();
+
+		return { success: true, message: "Item excluído." };
+	} catch (error) {
+		return handleActionError(error);
+	}
+}
+
+export async function bulkDeleteInboxItemsAction(
+	input: z.infer<typeof bulkDeleteInboxSchema>,
+): Promise<ActionResult> {
+	try {
+		const user = await getUser();
+		const data = bulkDeleteInboxSchema.parse(input);
+
+		const result = await db
+			.delete(preLancamentos)
+			.where(
+				and(
+					eq(preLancamentos.userId, user.id),
+					eq(preLancamentos.status, data.status),
+				),
+			)
+			.returning({ id: preLancamentos.id });
+
+		revalidateInbox();
+
+		const count = result.length;
+		return {
+			success: true,
+			message: `${count} item(s) excluído(s).`,
+		};
+	} catch (error) {
+		return handleActionError(error);
+	}
+}

app/(dashboard)/pre-lancamentos/layout.tsx

@@ -1,4 +1,4 @@
-import { RiInboxLine } from "@remixicon/react";
+import { RiAtLine } from "@remixicon/react";
 import PageDescription from "@/components/page-description";
 
 export const metadata = {
@@ -13,7 +13,7 @@ export default function RootLayout({
 	return (
 		<section className="space-y-6 pt-4">
 			<PageDescription
-				icon={<RiInboxLine />}
+				icon={<RiAtLine />}
 				title="Pré-Lançamentos"
 				subtitle="Notificações capturadas pelo Companion"
 			/>

app/globals.css

@@ -343,3 +343,34 @@
 [data-slot="dialog-content"][data-state="closed"] {
   animation: dialog-out 0.15s ease-in;
 }
+
+/* Overdue blink: alternates two stacked labels with a smooth crossfade */
+@keyframes blink-in {
+  0%, 40%  { opacity: 1; }
+  50%, 90% { opacity: 0; }
+  100%     { opacity: 1; }
+}
+
+@keyframes blink-out {
+  0%, 40%  { opacity: 0; }
+  50%, 90% { opacity: 1; }
+  100%     { opacity: 0; }
+}
+
+.overdue-blink {
+  position: relative;
+  display: inline-flex;
+}
+
+.overdue-blink-primary {
+  animation: blink-in 6s ease-in-out infinite;
+}
+
+.overdue-blink-secondary {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  animation: blink-out 6s ease-in-out infinite;
+}

components/categorias/categories-page.tsx

@@ -1,20 +1,41 @@
 "use client";
 
-import { RiAddCircleLine } from "@remixicon/react";
+import {
+	RiAddCircleLine,
+	RiDeleteBin5Line,
+	RiExternalLinkLine,
+	RiPencilLine,
+} from "@remixicon/react";
+import Link from "next/link";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { deleteCategoryAction } from "@/app/(dashboard)/categorias/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
 	CATEGORY_TYPE_LABEL,
 	CATEGORY_TYPES,
 } from "@/lib/categorias/constants";
-import { CategoryCard } from "./category-card";
 import { CategoryDialog } from "./category-dialog";
+import { CategoryIconBadge } from "./category-icon-badge";
 import type { Category, CategoryType } from "./types";
 
+const CATEGORIAS_PROTEGIDAS = [
+	"Transferência interna",
+	"Saldo inicial",
+	"Pagamentos",
+];
+
 interface CategoriesPageProps {
 	categories: Category[];
 }
@@ -129,17 +150,83 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 									{CATEGORY_TYPE_LABEL[type].toLowerCase()}.
 								</div>
 							) : (
-								<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+								<Card className="py-2">
-									{categoriesByType[type].map((category, index) => (
+									<CardContent className="px-2 py-4 sm:px-4">
-										<CategoryCard
+										<Table>
-											key={category.id}
+											<TableHeader>
-											category={category}
+												<TableRow>
-											colorIndex={index}
+													<TableHead className="w-10" />
-											onEdit={handleEdit}
+													<TableHead>Nome</TableHead>
-											onRemove={handleRemoveRequest}
+													<TableHead className="text-right">Ações</TableHead>
-										/>
+												</TableRow>
-									))}
+											</TableHeader>
-								</div>
+											<TableBody>
+												{categoriesByType[type].map((category, index) => {
+													const isProtegida = CATEGORIAS_PROTEGIDAS.includes(
+														category.name,
+													);
+
+													return (
+														<TableRow key={category.id}>
+															<TableCell>
+																<CategoryIconBadge
+																	icon={category.icon}
+																	name={category.name}
+																	colorIndex={index}
+																	size="md"
+																/>
+															</TableCell>
+															<TableCell className="font-medium">
+																<Link
+																	href={`/categorias/${category.id}`}
+																	className="inline-flex items-center gap-1 underline-offset-2 hover:text-primary hover:underline"
+																>
+																	{category.name}
+																	<RiExternalLinkLine
+																		className="size-3 shrink-0 text-muted-foreground"
+																		aria-hidden
+																	/>
+																</Link>
+															</TableCell>
+															<TableCell>
+																<div className="flex items-center justify-end gap-3 text-sm">
+																	{!isProtegida && (
+																		<button
+																			type="button"
+																			onClick={() => handleEdit(category)}
+																			className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
+																		>
+																			<RiPencilLine
+																				className="size-4"
+																				aria-hidden
+																			/>
+																			editar
+																		</button>
+																	)}
+																	{!isProtegida && (
+																		<button
+																			type="button"
+																			onClick={() =>
+																				handleRemoveRequest(category)
+																			}
+																			className="flex items-center gap-1 font-medium text-destructive transition-opacity hover:opacity-80"
+																		>
+																			<RiDeleteBin5Line
+																				className="size-4"
+																				aria-hidden
+																			/>
+																			remover
+																		</button>
+																	)}
+																</div>
+															</TableCell>
+														</TableRow>
+													);
+												})}
+											</TableBody>
+										</Table>
+									</CardContent>
+								</Card>
 							)}
 						</TabsContent>
 					))}

components/dashboard/boletos-widget.tsx

@@ -5,6 +5,7 @@ import {
 	RiCheckboxCircleFill,
 	RiCheckboxCircleLine,
 	RiLoader4Line,
+	RiMoneyDollarCircleLine,
 } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useState, useTransition } from "react";
@@ -165,6 +166,12 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
 					<ul className="flex flex-col">
 						{items.map((boleto) => {
 							const statusLabel = buildStatusLabel(boleto);
+							const isOverdue = (() => {
+								if (boleto.isSettled || !boleto.dueDate) return false;
+								const [y, m, d] = boleto.dueDate.split("-").map(Number);
+								if (!y || !m || !d) return false;
+								return new Date(Date.UTC(y, m - 1, d)) < new Date();
+							})();
 
 							return (
 								<li
@@ -205,6 +212,13 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
 												<span className="flex items-center gap-1 text-success">
 													<RiCheckboxCircleFill className="size-3" /> Pago
 												</span>
+											) : isOverdue ? (
+												<span className="overdue-blink">
+													<span className="overdue-blink-primary text-destructive">
+														Atrasado
+													</span>
+													<span className="overdue-blink-secondary">Pagar</span>
+												</span>
 											) : (
 												"Pagar"
 											)}
@@ -271,7 +285,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
 						</div>
 					) : (
 						<>
-							<DialogHeader className="gap-3 text-center sm:text-left">
+							<DialogHeader>
 								<DialogTitle>Confirmar pagamento do boleto</DialogTitle>
 								<DialogDescription>
 									Confirme os dados para registrar o pagamento. Você poderá
@@ -280,47 +294,59 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
 							</DialogHeader>
 
 							{selectedBoleto ? (
-								<div className="flex flex-col gap-4">
+								<div className="space-y-4">
-									<div className="flex flex-col items-center gap-3 rounded-lg border border-border/60 bg-muted/50 p-4 text-center sm:flex-row sm:text-left">
+									<div className="rounded-lg border p-4">
-										<div className="flex size-12 shrink-0 items-center justify-center">
+										<div className="flex items-center justify-between">
-											<RiBarcodeFill className="size-8" />
+											<div className="flex items-center gap-3">
-										</div>
+												<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
-										<div className="space-y-1">
+													<RiBarcodeFill className="size-5 text-primary" />
-											<p className="text-sm font-medium text-foreground">
+												</div>
-												{selectedBoleto.name}
+												<div>
-											</p>
+													<p className="text-sm font-medium text-muted-foreground">
+														Boleto
+													</p>
+													<p className="text-lg font-bold text-foreground">
+														{selectedBoleto.name}
+													</p>
+												</div>
+											</div>
 											{selectedBoletoDueLabel ? (
-												<p className="text-xs text-muted-foreground">
+												<div className="text-right">
-													{selectedBoletoDueLabel}
+													<p className="text-sm text-muted-foreground">
-												</p>
+														{selectedBoletoDueLabel}
+													</p>
+												</div>
 											) : null}
 										</div>
 									</div>
 
-									<div className="grid grid-cols-1 gap-3 text-sm">
+									<div className="grid gap-3 sm:grid-cols-2">
-										<div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
+										<div className="rounded-lg border p-3">
-											<span className="text-xs uppercase text-muted-foreground/80">
+											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												Valor do boleto
+												<RiMoneyDollarCircleLine className="size-4" />
-											</span>
+												<span className="text-xs font-semibold uppercase">
+													Valor do Boleto
+												</span>
+											</div>
 											<MoneyValues
 												amount={selectedBoleto.amount}
-												className="text-lg"
+												className="text-lg font-bold"
 											/>
 										</div>
-										<div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
+										<div className="rounded-lg border p-3">
-											<span className="text-xs uppercase text-muted-foreground/80">
+											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												Status atual
+												<RiCheckboxCircleLine className="size-4" />
-											</span>
+												<span className="text-xs font-semibold uppercase">
-											<span className="text-sm font-medium">
+													Status
-												<Badge
+												</span>
-													variant={getStatusBadgeVariant(
+											</div>
-														selectedBoleto.isSettled ? "Pago" : "Pendente",
+											<Badge
-													)}
+												variant={getStatusBadgeVariant(
-													className="text-xs"
+													selectedBoleto.isSettled ? "Pago" : "Pendente",
-												>
+												)}
-													{selectedBoleto.isSettled ? "Pago" : "Pendente"}
+											>
-												</Badge>
+												{selectedBoleto.isSettled ? "Pago" : "Pendente"}
-											</span>
+											</Badge>
 										</div>
 									</div>
 								</div>

components/dashboard/dashboard-welcome.tsx

@@ -17,6 +17,7 @@ const formatCurrentDate = (date = new Date()) => {
 		day: "numeric",
 		month: "long",
 		year: "numeric",
+		hour12: false,
 		timeZone: "America/Sao_Paulo",
 	}).format(date);
 
@@ -68,7 +69,7 @@ export function DashboardWelcome({
 				/>
 			</div>
 			<div className="relative tracking-tight text-welcome-banner-foreground">
-				<h1 className="text-xl font-medium">
+				<h1 className="text-xl">
 					{greeting}, {displayName}! <span aria-hidden="true">👋</span>
 				</h1>
 				<p className="mt-2 text-sm opacity-90">{formattedDate}</p>

components/dashboard/invoices-widget.tsx

@@ -5,6 +5,7 @@ import {
 	RiCheckboxCircleLine,
 	RiExternalLinkLine,
 	RiLoader4Line,
+	RiMoneyDollarCircleLine,
 } from "@remixicon/react";
 import Image from "next/image";
 import Link from "next/link";
@@ -87,12 +88,14 @@ const parseDueDate = (period: string, dueDay: string) => {
 	) {
 		return {
 			label: `Vence dia ${dueDay}`,
+			date: null,
 		};
 	}
 
 	const date = new Date(Date.UTC(year, month - 1, dayNumber));
 	return {
 		label: `Vence em ${DUE_DATE_FORMATTER.format(date)}`,
+		date,
 	};
 };
 
@@ -251,6 +254,8 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
 							const dueInfo = parseDueDate(invoice.period, invoice.dueDay);
 							const isPaid =
 								invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID;
+							const isOverdue =
+								!isPaid && dueInfo.date !== null && dueInfo.date < new Date();
 							const paymentInfo = formatPaymentDate(invoice.paidAt);
 
 							return (
@@ -381,6 +386,15 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
 													<span className="text-success flex items-center gap-1">
 														<RiCheckboxCircleFill className="size-3" /> Pago
 													</span>
+												) : isOverdue ? (
+													<span className="overdue-blink">
+														<span className="overdue-blink-primary text-destructive">
+															Atrasado
+														</span>
+														<span className="overdue-blink-secondary">
+															Pagar
+														</span>
+													</span>
 												) : (
 													<span>Pagar</span>
 												)}
@@ -445,7 +459,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
 						</div>
 					) : (
 						<>
-							<DialogHeader className="gap-3">
+							<DialogHeader>
 								<DialogTitle>Confirmar pagamento</DialogTitle>
 								<DialogDescription>
 									Revise os dados antes de confirmar. Vamos registrar a fatura
@@ -454,72 +468,83 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
 							</DialogHeader>
 
 							{selectedInvoice ? (
-								<div className="flex flex-col gap-4">
+								<div className="space-y-4">
-									<div className="flex items-center gap-3 rounded-lg border border-border/60 bg-muted/50 p-3">
+									<div className="rounded-lg border p-4">
-										<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/60 bg-background">
+										<div className="flex items-center justify-between">
-											{selectedLogo ? (
+											<div className="flex items-center gap-3">
-												<Image
+												<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
-													src={selectedLogo}
+													{selectedLogo ? (
-													alt={`Logo do cartão ${selectedInvoice.cardName}`}
+														<Image
-													width={48}
+															src={selectedLogo}
-													height={48}
+															alt={`Logo do cartão ${selectedInvoice.cardName}`}
-													className="h-full w-full object-contain"
+															width={40}
-												/>
+															height={40}
-											) : (
+															className="h-full w-full object-contain"
-												<span className="text-sm font-semibold uppercase text-muted-foreground">
+														/>
-													{buildInitials(selectedInvoice.cardName)}
+													) : (
-												</span>
+														<span className="text-xs font-semibold uppercase text-primary">
-											)}
+															{buildInitials(selectedInvoice.cardName)}
-										</div>
+														</span>
-										<div>
+													)}
-											<p className="text-sm text-muted-foreground">Cartão</p>
+												</div>
-											<p className="text-base font-semibold text-foreground">
+												<div>
-												{selectedInvoice.cardName}
+													<p className="text-sm font-medium text-muted-foreground">
-											</p>
+														Cartão
-											{selectedInvoice.paymentStatus !==
+													</p>
-											INVOICE_PAYMENT_STATUS.PAID ? (
+													<p className="text-lg font-bold text-foreground">
-												<p className="text-xs text-muted-foreground">
+														{selectedInvoice.cardName}
-													{
+													</p>
-														parseDueDate(
+												</div>
-															selectedInvoice.period,
+											</div>
-															selectedInvoice.dueDay,
+											<div className="text-right">
-														).label
+												{selectedInvoice.paymentStatus !==
-													}
+												INVOICE_PAYMENT_STATUS.PAID ? (
-												</p>
+													<p className="text-sm text-muted-foreground">
-											) : null}
+														{
-											{selectedInvoice.paymentStatus ===
+															parseDueDate(
-												INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
+																selectedInvoice.period,
-												<p className="text-xs text-success">
+																selectedInvoice.dueDay,
-													{selectedPaymentInfo.label}
+															).label
-												</p>
+														}
-											) : null}
+													</p>
+												) : null}
+												{selectedInvoice.paymentStatus ===
+													INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
+													<p className="text-sm text-success">
+														{selectedPaymentInfo.label}
+													</p>
+												) : null}
+											</div>
 										</div>
 									</div>
 
-									<div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-1">
+									<div className="grid gap-3 sm:grid-cols-2">
-										<div className="rounded border border-border/60 px-3 items-center py-2 flex justify-between">
+										<div className="rounded-lg border p-3">
-											<span className="text-xs uppercase text-muted-foreground/80">
+											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												Valor da fatura
+												<RiMoneyDollarCircleLine className="size-4" />
-											</span>
+												<span className="text-xs font-semibold uppercase">
+													Valor da Fatura
+												</span>
+											</div>
 											<MoneyValues
 												amount={Math.abs(selectedInvoice.totalAmount)}
-												className="text-lg"
+												className="text-lg font-bold"
 											/>
 										</div>
-										<div className="rounded border border-border/60 px-3 py-2 flex justify-between items-center">
+										<div className="rounded-lg border p-3">
-											<span className="text-xs uppercase text-muted-foreground/80">
+											<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-												Status atual
+												<RiCheckboxCircleLine className="size-4" />
-											</span>
+												<span className="text-xs font-semibold uppercase">
-											<span className="block text-sm">
+													Status
-												<Badge
+												</span>
-													variant={getStatusBadgeVariant(
+											</div>
-														INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus],
+											<Badge
-													)}
+												variant={getStatusBadgeVariant(
-													className="text-xs"
+													INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus],
-												>
+												)}
-													{INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
+											>
-												</Badge>
+												{INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
-											</span>
+											</Badge>
 										</div>
 									</div>
 								</div>

components/navbar/nav-items.tsx

@@ -1,12 +1,12 @@
 import {
 	RiArrowLeftRightLine,
+	RiAtLine,
 	RiBankCard2Line,
 	RiBankLine,
+	RiBarChart2Line,
 	RiCalendarEventLine,
 	RiFileChartLine,
-	RiFundsLine,
 	RiGroupLine,
-	RiInboxLine,
 	RiPriceTag3Line,
 	RiSparklingLine,
 	RiTodoLine,
@@ -39,7 +39,7 @@ export const NAV_SECTIONS: NavSection[] = [
 			{
 				href: "/pre-lancamentos",
 				label: "pré-lançamentos",
-				icon: <RiInboxLine className="size-4" />,
+				icon: <RiAtLine className="size-4" />,
 			},
 			{
 				href: "/calendario",
@@ -65,7 +65,7 @@ export const NAV_SECTIONS: NavSection[] = [
 			{
 				href: "/orcamentos",
 				label: "orçamentos",
-				icon: <RiFundsLine className="size-4" />,
+				icon: <RiBarChart2Line className="size-4" />,
 				preservePeriod: true,
 			},
 		],

components/notificacoes/notification-bell.tsx

@@ -3,15 +3,16 @@
 import {
 	RiAlertFill,
 	RiArrowRightLine,
+	RiAtLine,
 	RiBankCardLine,
 	RiBarChart2Line,
 	RiCheckboxCircleFill,
 	RiErrorWarningLine,
 	RiFileListLine,
-	RiInboxLine,
 	RiNotification3Line,
 	RiTimeLine,
 } from "@remixicon/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
@@ -46,6 +47,12 @@ type NotificationBellProps = {
 	preLancamentosCount?: number;
 };
 
+const resolveLogoPath = (logo: string | null | undefined) => {
+	if (!logo) return null;
+	if (/^(https?:\/\/|data:)/.test(logo)) return logo;
+	return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
 function formatDate(dateString: string): string {
 	const [year, month, day] = dateString.split("-").map(Number);
 	const date = new Date(Date.UTC(year, month - 1, day));
@@ -72,10 +79,8 @@ function SectionLabel({
 }) {
 	return (
 		<div className="flex items-center gap-1.5 px-3 pb-1 pt-3">
-			<span className="text-muted-foreground/60">{icon}</span>
+			<span className="text-muted-foreground">{icon}</span>
-			<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
+			<span className="text-xs text-muted-foreground">{title}</span>
-				{title}
-			</span>
 		</div>
 	);
 }
@@ -174,7 +179,7 @@ export function NotificationBell({
 						{preLancamentosCount > 0 && (
 							<div>
 								<SectionLabel
-									icon={<RiInboxLine className="size-3" />}
+									icon={<RiAtLine className="size-3" />}
 									title="Pré-lançamentos"
 								/>
 								<Link
@@ -182,6 +187,7 @@ export function NotificationBell({
 									onClick={() => setOpen(false)}
 									className="group mx-1 mb-1 flex items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-accent/60"
 								>
+									<RiAtLine className="size-6 shrink-0 text-primary" />
 									<p className="flex-1 text-xs leading-snug text-foreground">
 										{preLancamentosCount === 1
 											? "1 pré-lançamento aguardando revisão"
@@ -206,9 +212,9 @@ export function NotificationBell({
 											className="flex items-start gap-2 px-2 py-2"
 										>
 											{n.status === "exceeded" ? (
-												<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+												<RiAlertFill className="mt-0.5 size-6 shrink-0 text-destructive" />
 											) : (
-												<RiErrorWarningLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
+												<RiErrorWarningLine className="mt-0.5 size-6 shrink-0 text-amber-500" />
 											)}
 											<p className="text-xs leading-snug">
 												{n.status === "exceeded" ? (
@@ -243,43 +249,54 @@ export function NotificationBell({
 									title="Cartão de Crédito"
 								/>
 								<div className="mx-1 mb-1 overflow-hidden rounded-md">
-									{invoiceNotifications.map((n) => (
+									{invoiceNotifications.map((n) => {
-										<div
+										const logo = resolveLogoPath(n.cardLogo);
-											key={n.id}
+										return (
-											className="flex items-start gap-2 px-2 py-2"
+											<div
-										>
+												key={n.id}
-											{n.status === "overdue" ? (
+												className="flex items-start gap-2 px-2 py-2"
-												<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+											>
-											) : (
+												{logo ? (
-												<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
+													<Image
-											)}
+														src={logo}
-											<p className="text-xs leading-snug">
+														alt=""
-												{n.status === "overdue" ? (
+														width={24}
-													<>
+														height={24}
-														A fatura de <strong>{n.name}</strong> venceu em{" "}
+														className="mt-0.5 size-6 shrink-0 rounded-sm object-contain"
-														{formatDate(n.dueDate)}
+													/>
-														{n.showAmount && n.amount > 0 && (
+												) : n.status === "overdue" ? (
-															<>
+													<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
-																{" "}
-																— <strong>{formatCurrency(n.amount)}</strong>
-															</>
-														)}
-													</>
 												) : (
-													<>
+													<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
-														A fatura de <strong>{n.name}</strong> vence em{" "}
-														{formatDate(n.dueDate)}
-														{n.showAmount && n.amount > 0 && (
-															<>
-																{" "}
-																— <strong>{formatCurrency(n.amount)}</strong>
-															</>
-														)}
-													</>
 												)}
-											</p>
+												<p className="text-xs leading-snug">
-										</div>
+													{n.status === "overdue" ? (
-									))}
+														<>
+															A fatura de <strong>{n.name}</strong> venceu em{" "}
+															{formatDate(n.dueDate)}
+															{n.showAmount && n.amount > 0 && (
+																<>
+																	{" "}
+																	— <strong>{formatCurrency(n.amount)}</strong>
+																</>
+															)}
+														</>
+													) : (
+														<>
+															A fatura de <strong>{n.name}</strong> vence em{" "}
+															{formatDate(n.dueDate)}
+															{n.showAmount && n.amount > 0 && (
+																<>
+																	{" "}
+																	— <strong>{formatCurrency(n.amount)}</strong>
+																</>
+															)}
+														</>
+													)}
+												</p>
+											</div>
+										);
+									})}
 								</div>
 							</div>
 						)}
@@ -297,11 +314,14 @@ export function NotificationBell({
 											key={n.id}
 											className="flex items-start gap-2 px-2 py-2"
 										>
-											{n.status === "overdue" ? (
+											<RiAlertFill
-												<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+												className={cn(
-											) : (
+													"mt-0.5 size-6 shrink-0",
-												<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
+													n.status === "overdue"
-											)}
+														? "text-destructive"
+														: "text-amber-500",
+												)}
+											/>
 											<p className="text-xs leading-snug">
 												{n.status === "overdue" ? (
 													<>

components/pagadores/details/pagador-info-card.tsx

@@ -292,7 +292,7 @@ export function PagadorInfoCard({
 
 						<div className="space-y-4">
 							{/* Total Geral */}
-							<div className="rounded-lg border bg-muted/30 p-4">
+							<div className="rounded-lg border p-4">
 								<div className="flex items-center justify-between">
 									<div className="flex items-center gap-3">
 										<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
@@ -318,7 +318,7 @@ export function PagadorInfoCard({
 							{/* Grid de Formas de Pagamento */}
 							<div className="grid gap-3 sm:grid-cols-3">
 								{/* Cartões */}
-								<div className="rounded-lg border bg-background p-3">
+								<div className="rounded-lg border p-3">
 									<div className="flex items-center gap-2 text-muted-foreground mb-2">
 										<RiBankCard2Line className="size-4" />
 										<span className="text-xs font-semibold uppercase">
@@ -331,7 +331,7 @@ export function PagadorInfoCard({
 								</div>
 
 								{/* Boletos */}
-								<div className="rounded-lg border bg-background p-3">
+								<div className="rounded-lg border p-3">
 									<div className="flex items-center gap-2 text-muted-foreground mb-2">
 										<RiBillLine className="size-4" />
 										<span className="text-xs font-semibold uppercase">
@@ -344,7 +344,7 @@ export function PagadorInfoCard({
 								</div>
 
 								{/* Instantâneo */}
-								<div className="rounded-lg border bg-background p-3">
+								<div className="rounded-lg border p-3">
 									<div className="flex items-center gap-2 text-muted-foreground mb-2">
 										<RiExchangeDollarLine className="size-4" />
 										<span className="text-xs font-semibold uppercase">
@@ -361,7 +361,7 @@ export function PagadorInfoCard({
 							<div className="space-y-3">
 								{/* Cartões Utilizados */}
 								{summary.cardUsage.length > 0 && (
-									<div className="rounded-lg border bg-muted/20 p-3">
+									<div className="rounded-lg border p-3">
 										<div className="flex items-center gap-2 mb-2">
 											<RiBankCard2Line className="size-4 text-muted-foreground" />
 											<span className="text-xs font-semibold uppercase text-muted-foreground">
@@ -387,7 +387,7 @@ export function PagadorInfoCard({
 								{/* Status de Boletos */}
 								{(summary.boletoStats.paidCount > 0 ||
 									summary.boletoStats.pendingCount > 0) && (
-									<div className="rounded-lg border bg-muted/20 p-3">
+									<div className="rounded-lg border p-3">
 										<div className="flex items-center gap-2 mb-2">
 											<RiBillLine className="size-4 text-muted-foreground" />
 											<span className="text-xs font-semibold uppercase text-muted-foreground">

components/pre-lancamentos/inbox-card.tsx

@@ -36,6 +36,7 @@ interface InboxCardProps {
 	onProcess?: (item: InboxItem) => void;
 	onDiscard?: (item: InboxItem) => void;
 	onViewDetails?: (item: InboxItem) => void;
+	onDelete?: (item: InboxItem) => void;
 }
 
 function resolveLogoPath(logo: string): string {
@@ -77,6 +78,7 @@ export function InboxCard({
 	onProcess,
 	onDiscard,
 	onViewDetails,
+	onDelete,
 }: InboxCardProps) {
 	const matchedLogo = useMemo(
 		() =>
@@ -202,6 +204,16 @@ export function InboxCard({
 							{formattedStatusDate}
 						</span>
 					)}
+					{onDelete && (
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							className="ml-auto text-muted-foreground hover:text-destructive"
+							onClick={() => onDelete(item)}
+						>
+							<RiDeleteBinLine className="size-4" />
+						</Button>
+					)}
 				</CardFooter>
 			) : (
 				<CardFooter className="gap-2 pt-3 pb-4">

components/pre-lancamentos/inbox-page.tsx

@@ -1,15 +1,18 @@
 "use client";
 
-import { RiInboxLine } from "@remixicon/react";
+import { RiAtLine, RiDeleteBinLine } from "@remixicon/react";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
+	bulkDeleteInboxItemsAction,
+	deleteInboxItemAction,
 	discardInboxItemAction,
 	markInboxAsProcessedAction,
 } from "@/app/(dashboard)/pre-lancamentos/actions";
 import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
 import { EmptyState } from "@/components/empty-state";
 import { LancamentoDialog } from "@/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog";
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { InboxCard } from "./inbox-card";
@@ -52,6 +55,14 @@ export function InboxPage({
 	const [discardOpen, setDiscardOpen] = useState(false);
 	const [itemToDiscard, setItemToDiscard] = useState<InboxItem | null>(null);
 
+	const [deleteOpen, setDeleteOpen] = useState(false);
+	const [itemToDelete, setItemToDelete] = useState<InboxItem | null>(null);
+
+	const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+	const [bulkDeleteStatus, setBulkDeleteStatus] = useState<
+		"processed" | "discarded"
+	>("processed");
+
 	const sortByTimestamp = useCallback(
 		(list: InboxItem[]) =>
 			[...list].sort(
@@ -127,6 +138,60 @@ export function InboxPage({
 		throw new Error(result.error);
 	}, [itemToDiscard]);
 
+	const handleDeleteOpenChange = useCallback((open: boolean) => {
+		setDeleteOpen(open);
+		if (!open) {
+			setItemToDelete(null);
+		}
+	}, []);
+
+	const handleDeleteRequest = useCallback((item: InboxItem) => {
+		setItemToDelete(item);
+		setDeleteOpen(true);
+	}, []);
+
+	const handleDeleteConfirm = useCallback(async () => {
+		if (!itemToDelete) return;
+
+		const result = await deleteInboxItemAction({
+			inboxItemId: itemToDelete.id,
+		});
+
+		if (result.success) {
+			toast.success(result.message);
+			return;
+		}
+
+		toast.error(result.error);
+		throw new Error(result.error);
+	}, [itemToDelete]);
+
+	const handleBulkDeleteOpenChange = useCallback((open: boolean) => {
+		setBulkDeleteOpen(open);
+	}, []);
+
+	const handleBulkDeleteRequest = useCallback(
+		(status: "processed" | "discarded") => {
+			setBulkDeleteStatus(status);
+			setBulkDeleteOpen(true);
+		},
+		[],
+	);
+
+	const handleBulkDeleteConfirm = useCallback(async () => {
+		const result = await bulkDeleteInboxItemsAction({
+			status: bulkDeleteStatus,
+		});
+
+		if (result.success) {
+			toast.success(result.message);
+			return;
+		}
+
+		toast.error(result.error);
+		throw new Error(result.error);
+	}, [bulkDeleteStatus]);
+
 	const handleLancamentoSuccess = useCallback(async () => {
 		if (!itemToProcess) return;
 
@@ -180,7 +245,7 @@ export function InboxPage({
 	const renderEmptyState = (message: string) => (
 		<Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
 			<EmptyState
-				media={<RiInboxLine className="size-6 text-primary" />}
+				media={<RiAtLine className="size-6 text-primary" />}
 				title={message}
 				description="As notificações capturadas pelo app OpenMonetis Companion aparecerão aqui. Saiba mais em Ajustes > Companion."
 			/>
@@ -205,6 +270,7 @@ export function InboxPage({
 						onProcess={readonly ? undefined : handleProcessRequest}
 						onDiscard={readonly ? undefined : handleDiscardRequest}
 						onViewDetails={readonly ? undefined : handleDetailsRequest}
+						onDelete={readonly ? handleDeleteRequest : undefined}
 					/>
 				))}
 			</div>
@@ -229,9 +295,33 @@ export function InboxPage({
 					{renderGrid(sortedPending)}
 				</TabsContent>
 				<TabsContent value="processed" className="mt-4">
+					{sortedProcessed.length > 0 && (
+						<div className="mb-4 flex justify-end">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => handleBulkDeleteRequest("processed")}
+							>
+								<RiDeleteBinLine className="mr-1.5 size-4" />
+								Limpar processados
+							</Button>
+						</div>
+					)}
 					{renderGrid(sortedProcessed, true)}
 				</TabsContent>
 				<TabsContent value="discarded" className="mt-4">
+					{sortedDiscarded.length > 0 && (
+						<div className="mb-4 flex justify-end">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => handleBulkDeleteRequest("discarded")}
+							>
+								<RiDeleteBinLine className="mr-1.5 size-4" />
+								Limpar descartados
+							</Button>
+						</div>
+					)}
 					{renderGrid(sortedDiscarded, true)}
 				</TabsContent>
 			</Tabs>
@@ -272,6 +362,28 @@ export function InboxPage({
 				pendingLabel="Descartando..."
 				onConfirm={handleDiscardConfirm}
 			/>
+
+			<ConfirmActionDialog
+				open={deleteOpen}
+				onOpenChange={handleDeleteOpenChange}
+				title="Excluir notificação?"
+				description="A notificação será excluída permanentemente."
+				confirmLabel="Excluir"
+				confirmVariant="destructive"
+				pendingLabel="Excluindo..."
+				onConfirm={handleDeleteConfirm}
+			/>
+
+			<ConfirmActionDialog
+				open={bulkDeleteOpen}
+				onOpenChange={handleBulkDeleteOpenChange}
+				title={`Limpar ${bulkDeleteStatus === "processed" ? "processados" : "descartados"}?`}
+				description={`Todos os itens ${bulkDeleteStatus === "processed" ? "processados" : "descartados"} serão excluídos permanentemente.`}
+				confirmLabel="Limpar tudo"
+				confirmVariant="destructive"
+				pendingLabel="Excluindo..."
+				onConfirm={handleBulkDeleteConfirm}
+			/>
 		</>
 	);
 }

components/sidebar/nav-link.tsx

@@ -1,6 +1,7 @@
 import {
 	type RemixiconComponentType,
 	RiArrowLeftRightLine,
+	RiAtLine,
 	RiBankCard2Line,
 	RiBankLine,
 	RiCalendarEventLine,
@@ -8,7 +9,6 @@ import {
 	RiFileChartLine,
 	RiFundsLine,
 	RiGroupLine,
-	RiInboxLine,
 	RiPriceTag3Line,
 	RiSettings2Line,
 	RiSparklingLine,
@@ -98,7 +98,7 @@ export function createSidebarNavData(
 								title: "Pré-Lançamentos",
 								url: "/pre-lancamentos",
 								key: "pre-lancamentos",
-								icon: RiInboxLine,
+								icon: RiAtLine,
 								badge:
 									preLancamentosCount > 0 ? preLancamentosCount : undefined,
 							},

lib/dashboard/notifications.ts

@@ -23,6 +23,7 @@ export type DashboardNotification = {
 	amount: number;
 	period?: string;
 	showAmount: boolean;
+	cardLogo?: string | null;
 };
 
 export type BudgetStatus = "exceeded" | "critical";
@@ -160,6 +161,7 @@ export async function fetchDashboardNotifications(
 			invoiceId: faturas.id,
 			cardId: cartoes.id,
 			cardName: cartoes.name,
+			cardLogo: cartoes.logo,
 			dueDay: cartoes.dueDay,
 			period: faturas.period,
 			totalAmount: sql<number | null>`
@@ -189,6 +191,7 @@ export async function fetchDashboardNotifications(
 			invoiceId: faturas.id,
 			cardId: cartoes.id,
 			cardName: cartoes.name,
+			cardLogo: cartoes.logo,
 			dueDay: cartoes.dueDay,
 			period: sql<string>`COALESCE(${faturas.period}, ${currentPeriod})`,
 			paymentStatus: faturas.paymentStatus,
@@ -219,6 +222,7 @@ export async function fetchDashboardNotifications(
 			faturas.id,
 			cartoes.id,
 			cartoes.name,
+			cartoes.logo,
 			cartoes.dueDay,
 			faturas.period,
 			faturas.paymentStatus,
@@ -296,6 +300,7 @@ export async function fetchDashboardNotifications(
 			amount: Math.abs(amount),
 			period: invoice.period,
 			showAmount: true,
+			cardLogo: invoice.cardLogo,
 		});
 	}
 
@@ -332,6 +337,7 @@ export async function fetchDashboardNotifications(
 			amount: Math.abs(amount),
 			period: invoice.period,
 			showAmount: invoiceIsOverdue,
+			cardLogo: invoice.cardLogo,
 		});
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openmonetis",
-	"version": "1.7.4",
+	"version": "1.7.5",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbopack",