Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
chore: atualizações de dashboard, inbox e versão 1.7.5
This commit is contained in:
Felipe Coutinho
2026-02-28 12:38:50 -03:00
committed by GitHub
parent 125e0dfb4e b2ca48f0fe
commit ff382a0ca7
18 changed files with 628 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@@ -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

57
app/(dashboard)/categorias/loading.tsx
View File

@@ -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 */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
{/* Ícone + Nome */}
<div className="flex items-center gap-3">
<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
{/* Tabela de categorias */}
<Card className="py-2">
<CardContent className="px-2 py-4 sm:px-4">
<div className="space-y-0">
{/* Header da tabela */}
<div className="flex items-center gap-4 border-b px-2 pb-3">
<Skeleton className="size-5 rounded bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
<div className="flex-1" />
<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>
))}
</div>
</CardContent>
</Card>
</div>
</div>
</main>

4
app/(dashboard)/orcamentos/layout.tsx
View File

@@ -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."
/>

83
app/(dashboard)/pre-lancamentos/actions.ts
View File

@@ -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);
}
}

4
app/(dashboard)/pre-lancamentos/layout.tsx
View File

@@ -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"
/>

31
app/globals.css
View File

@@ -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;
}

113
components/categorias/categories-page.tsx
View File

@@ -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">
{categoriesByType[type].map((category, index) => (
<CategoryCard
key={category.id}
category={category}
colorIndex={index}
onEdit={handleEdit}
onRemove={handleRemoveRequest}
/>
))}
</div>
<Card className="py-2">
<CardContent className="px-2 py-4 sm:px-4">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-10" />
<TableHead>Nome</TableHead>
<TableHead className="text-right">Ações</TableHead>
</TableRow>
</TableHeader>
<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>
))}

92
components/dashboard/boletos-widget.tsx
View File

@@ -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="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="flex size-12 shrink-0 items-center justify-center">
<RiBarcodeFill className="size-8" />
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-foreground">
{selectedBoleto.name}
</p>
<div className="space-y-4">
<div className="rounded-lg border p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
<RiBarcodeFill className="size-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">
Boleto
</p>
<p className="text-lg font-bold text-foreground">
{selectedBoleto.name}
</p>
</div>
</div>
{selectedBoletoDueLabel ? (
<p className="text-xs text-muted-foreground">
{selectedBoletoDueLabel}
</p>
<div className="text-right">
<p className="text-sm text-muted-foreground">
{selectedBoletoDueLabel}
</p>
</div>
) : null}
</div>
</div>
<div className="grid grid-cols-1 gap-3 text-sm">
<div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
<span className="text-xs uppercase text-muted-foreground/80">
Valor do boleto
</span>
<div className="grid gap-3 sm:grid-cols-2">
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiMoneyDollarCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Valor do Boleto
</span>
</div>
<MoneyValues
amount={selectedBoleto.amount}
className="text-lg"
className="text-lg font-bold"
/>
</div>
<div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
<span className="text-xs uppercase text-muted-foreground/80">
Status atual
</span>
<span className="text-sm font-medium">
<Badge
variant={getStatusBadgeVariant(
selectedBoleto.isSettled ? "Pago" : "Pendente",
)}
className="text-xs"
>
{selectedBoleto.isSettled ? "Pago" : "Pendente"}
</Badge>
</span>
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiCheckboxCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Status
</span>
</div>
<Badge
variant={getStatusBadgeVariant(
selectedBoleto.isSettled ? "Pago" : "Pendente",
)}
>
{selectedBoleto.isSettled ? "Pago" : "Pendente"}
</Badge>
</div>
</div>
</div>

3
components/dashboard/dashboard-welcome.tsx
View File

@@ -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>

145
components/dashboard/invoices-widget.tsx
View File

@@ -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="flex items-center gap-3 rounded-lg border border-border/60 bg-muted/50 p-3">
<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/60 bg-background">
{selectedLogo ? (
<Image
src={selectedLogo}
alt={`Logo do cartão ${selectedInvoice.cardName}`}
width={48}
height={48}
className="h-full w-full object-contain"
/>
) : (
<span className="text-sm font-semibold uppercase text-muted-foreground">
{buildInitials(selectedInvoice.cardName)}
</span>
)}
</div>
<div>
<p className="text-sm text-muted-foreground">Cartão</p>
<p className="text-base font-semibold text-foreground">
{selectedInvoice.cardName}
</p>
{selectedInvoice.paymentStatus !==
INVOICE_PAYMENT_STATUS.PAID ? (
<p className="text-xs text-muted-foreground">
{
parseDueDate(
selectedInvoice.period,
selectedInvoice.dueDay,
).label
}
</p>
) : null}
{selectedInvoice.paymentStatus ===
INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
<p className="text-xs text-success">
{selectedPaymentInfo.label}
</p>
) : null}
<div className="space-y-4">
<div className="rounded-lg border p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
{selectedLogo ? (
<Image
src={selectedLogo}
alt={`Logo do cartão ${selectedInvoice.cardName}`}
width={40}
height={40}
className="h-full w-full object-contain"
/>
) : (
<span className="text-xs font-semibold uppercase text-primary">
{buildInitials(selectedInvoice.cardName)}
</span>
)}
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">
Cartão
</p>
<p className="text-lg font-bold text-foreground">
{selectedInvoice.cardName}
</p>
</div>
</div>
<div className="text-right">
{selectedInvoice.paymentStatus !==
INVOICE_PAYMENT_STATUS.PAID ? (
<p className="text-sm text-muted-foreground">
{
parseDueDate(
selectedInvoice.period,
selectedInvoice.dueDay,
).label
}
</p>
) : null}
{selectedInvoice.paymentStatus ===
INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
<p className="text-sm text-success">
{selectedPaymentInfo.label}
</p>
) : null}
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-1">
<div className="rounded border border-border/60 px-3 items-center py-2 flex justify-between">
<span className="text-xs uppercase text-muted-foreground/80">
Valor da fatura
</span>
<div className="grid gap-3 sm:grid-cols-2">
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiMoneyDollarCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Valor da Fatura
</span>
</div>
<MoneyValues
amount={Math.abs(selectedInvoice.totalAmount)}
className="text-lg"
className="text-lg font-bold"
/>
</div>
<div className="rounded border border-border/60 px-3 py-2 flex justify-between items-center">
<span className="text-xs uppercase text-muted-foreground/80">
Status atual
</span>
<span className="block text-sm">
<Badge
variant={getStatusBadgeVariant(
INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus],
)}
className="text-xs"
>
{INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
</Badge>
</span>
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiCheckboxCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Status
</span>
</div>
<Badge
variant={getStatusBadgeVariant(
INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus],
)}
>
{INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
</Badge>
</div>
</div>
</div>

8
components/navbar/nav-items.tsx
View File

@@ -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,
},
],

116
components/notificacoes/notification-bell.tsx
View File

@@ -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-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
{title}
</span>
<span className="text-muted-foreground">{icon}</span>
<span className="text-xs text-muted-foreground">{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) => (
<div
key={n.id}
className="flex items-start gap-2 px-2 py-2"
>
{n.status === "overdue" ? (
<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
) : (
<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
)}
<p className="text-xs leading-snug">
{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>
</>
)}
</>
{invoiceNotifications.map((n) => {
const logo = resolveLogoPath(n.cardLogo);
return (
<div
key={n.id}
className="flex items-start gap-2 px-2 py-2"
>
{logo ? (
<Image
src={logo}
alt=""
width={24}
height={24}
className="mt-0.5 size-6 shrink-0 rounded-sm object-contain"
/>
) : n.status === "overdue" ? (
<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
) : (
<>
A fatura de <strong>{n.name}</strong> vence em{" "}
{formatDate(n.dueDate)}
{n.showAmount && n.amount > 0 && (
<>
{" "}
— <strong>{formatCurrency(n.amount)}</strong>
</>
)}
</>
<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
)}
</p>
</div>
))}
<p className="text-xs leading-snug">
{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 className="mt-0.5 size-3.5 shrink-0 text-destructive" />
) : (
<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
)}
<RiAlertFill
className={cn(
"mt-0.5 size-6 shrink-0",
n.status === "overdue"
? "text-destructive"
: "text-amber-500",
)}
/>
<p className="text-xs leading-snug">
{n.status === "overdue" ? (
<>

12
components/pagadores/details/pagador-info-card.tsx
View File

@@ -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">

12
components/pre-lancamentos/inbox-card.tsx
View File

@@ -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">

116
components/pre-lancamentos/inbox-page.tsx
View File

@@ -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}
/>
</>
);
}

4
components/sidebar/nav-link.tsx
View File

@@ -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,
},

6
lib/dashboard/notifications.ts
View File

@@ -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,
});
}

2
package.json
View File

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