Ajusta widgets do dashboard

src/features/dashboard/components/bills/bill-list-item.tsx

@@ -65,7 +65,7 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 									<TooltipTrigger asChild>
 										<span
 											className={cn(
-												"cursor-help rounded-full py-0.5",
+												"cursor-help",
 												bill.isSettled && "text-success font-semibold",
 												overdue && "text-destructive font-semibold",
 											)}
@@ -80,7 +80,6 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 							) : (
 								<span
 									className={cn(
-										"rounded-full py-0.5",
 										bill.isSettled && "text-success font-semibold",
 										overdue && "text-destructive font-semibold",
 									)}

src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx

@@ -102,18 +102,19 @@ export function CategoryBreakdownListItem({
 						className="text-foreground font-medium"
 						amount={category.currentAmount}
 					/>
-					<PercentageChangeIndicator
-						value={category.percentageChange}
-						label={
-							category.percentageChange !== null
-								? formatPercentage(
-										category.percentageChange,
-										config.percentageDigits,
-									)
-								: undefined
-						}
-						positiveTrend={config.positiveTrend}
-					/>
+					{category.percentageChange !== null ? (
+						<span className="flex items-center gap-1 text-xs text-muted-foreground">
+							<PercentageChangeIndicator
+								value={category.percentageChange}
+								label={formatPercentage(
+									category.percentageChange,
+									config.percentageDigits,
+								)}
+								positiveTrend={config.positiveTrend}
+							/>
+							<span>vs. mês ant.</span>
+						</span>
+					) : null}
 				</div>
 			</div>
 		</div>

src/features/dashboard/components/installment-analysis/installment-group-card.tsx

@@ -2,6 +2,7 @@
 
 import {
 	RiBankCard2Line,
+	RiChat1Line,
 	RiCheckboxCircleFill,
 	RiFileList2Line,
 	RiTimeLine,
@@ -30,6 +31,11 @@ import {
 	DialogTitle,
 } from "@/shared/components/ui/dialog";
 import { Progress } from "@/shared/components/ui/progress";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { resolveLogoSrc } from "@/shared/lib/logo";
 import { cn } from "@/shared/utils";
 import type { InstallmentGroup } from "./types";
@@ -83,6 +89,7 @@ export function InstallmentGroupCard({
 	);
 	const cardLogoSrc = resolveLogoSrc(group.cartaoLogo);
 	const cardName = group.cartaoName ?? "Compra parcelada";
+	const hasNote = Boolean(group.note?.trim().length);
 	const untrackedLabel =
 		group.untrackedInstallments === 1
 			? "1 parcela anterior fora do acompanhamento"
@@ -121,8 +128,28 @@ export function InstallmentGroupCard({
 							<div className="flex items-center gap-3 flex-wrap">
 								<EstablishmentLogo name={group.name} size={40} />
 								<div className="flex-1 min-w-0">
-									<CardTitle className="text-base truncate">
-										{group.name}
+									<CardTitle className="flex items-center gap-1 text-base">
+										<span className="truncate">{group.name}</span>
+										{hasNote ? (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<span className="inline-flex shrink-0 rounded-full p-1 hover:bg-accent transition-colors duration-300">
+														<RiChat1Line
+															className="h-4 w-4 text-muted-foreground"
+															aria-hidden
+														/>
+														<span className="sr-only">Ver anotação</span>
+													</span>
+												</TooltipTrigger>
+												<TooltipContent
+													side="top"
+													align="start"
+													className="max-w-xs whitespace-pre-line"
+												>
+													{group.note}
+												</TooltipContent>
+											</Tooltip>
+										) : null}
 									</CardTitle>
 									<CardDescription className="flex min-w-0 items-center gap-1 text-xs">
 										{cardLogoSrc ? (
@@ -235,8 +262,28 @@ export function InstallmentGroupCard({
 						<div className="flex items-center gap-3">
 							<EstablishmentLogo name={group.name} size={32} />
 							<div className="min-w-0">
-								<DialogTitle className="truncate text-base">
-									{group.name}
+								<DialogTitle className="flex items-center gap-1 text-base">
+									<span className="truncate">{group.name}</span>
+									{hasNote ? (
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span className="inline-flex shrink-0 rounded-full p-1 hover:bg-accent transition-colors duration-300">
+													<RiChat1Line
+														className="h-4 w-4 text-muted-foreground"
+														aria-hidden
+													/>
+													<span className="sr-only">Ver anotação</span>
+												</span>
+											</TooltipTrigger>
+											<TooltipContent
+												side="top"
+												align="start"
+												className="max-w-xs whitespace-pre-line"
+											>
+												{group.note}
+											</TooltipContent>
+										</Tooltip>
+									) : null}
 								</DialogTitle>
 								<div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
 									{cardLogoSrc ? (

src/features/dashboard/components/invoices/invoice-list-item.tsx

@@ -123,9 +123,14 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 														className="font-medium"
 														amount={share.amount}
 													/>
-													<PercentageChangeIndicator
-														value={share.percentageChange}
-													/>
+													{share.percentageChange !== null ? (
+														<span className="flex items-center gap-1 text-xs text-muted-foreground">
+															<PercentageChangeIndicator
+																value={share.percentageChange}
+															/>
+															<span>vs. mês ant.</span>
+														</span>
+													) : null}
 												</div>
 											</li>
 										))}

src/features/dashboard/components/widgets/category-trends-widget.tsx

@@ -81,17 +81,20 @@ export function CategoryTrendsWidget({
 									</span>
 								</p>
 							</div>
-							<PercentageChangeIndicator
-								value={change}
-								label={formatPercentage(change, {
-									absolute: true,
-									minimumFractionDigits: 0,
-									maximumFractionDigits: 0,
-								})}
-								positiveTrend="down"
-								className="shrink-0 text-sm font-semibold"
-								iconClassName="size-3.5"
-							/>
+							<span className="flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
+								<PercentageChangeIndicator
+									value={change}
+									label={formatPercentage(change, {
+										absolute: true,
+										minimumFractionDigits: 0,
+										maximumFractionDigits: 0,
+									})}
+									positiveTrend="down"
+									className="text-sm font-semibold"
+									iconClassName="size-3.5"
+								/>
+								<span>vs. mês ant.</span>
+							</span>
 						</div>
 					</li>
 				);

src/features/dashboard/components/widgets/my-accounts-widget.tsx

@@ -144,7 +144,7 @@ export function MyAccountsWidget({
 									className="flex items-center justify-between py-1.5 transition-all duration-300"
 								>
 									<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
-										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
+										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full">
 											{logoSrc ? (
 												<Image
 													src={logoSrc}