chore: apply pending dashboard and UI updates

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

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