feat(dashboard): refina experiencia dos widgets

2026-07-10 03:46:01 +00:00 · 2026-05-31 15:18:43 -03:00
parent 402f0072af
commit 35abe1b0bf
39 changed files with 887 additions and 592 deletions
--- a/src/features/dashboard/components/widgets/category-trends-widget.tsx
+++ b/src/features/dashboard/components/widgets/category-trends-widget.tsx
@@ -1,6 +1,11 @@
 "use client";

-import { RiLineChartLine } from "@remixicon/react";
+import {
+	RiArrowRightLine,
+	RiCalendarLine,
+	RiHistoryLine,
+	RiLineChartLine,
+} from "@remixicon/react";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
@@ -50,12 +55,30 @@ export function CategoryTrendsWidget({
 								<p className="truncate text-sm font-medium text-foreground">
 									{category.categoryName}
 								</p>
-								<p className="text-xs text-muted-foreground">
-									<MoneyValues amount={category.previousAmount} /> vs{" "}
-									<MoneyValues
-										amount={category.currentAmount}
-										className="font-semibold"
-									/>
+								<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+									<span
+										className="inline-flex items-center gap-1"
+										title="Mês anterior"
+									>
+										<RiHistoryLine className="size-3.5" aria-hidden />
+										<span className="sr-only">Mês anterior:</span>
+										<MoneyValues amount={category.previousAmount} />
+									</span>
+									<RiArrowRightLine className="size-3" aria-hidden />
+									<span
+										className="inline-flex items-center gap-1 text-foreground"
+										title="Mês atual"
+									>
+										<RiCalendarLine
+											className="size-3.5 text-primary"
+											aria-hidden
+										/>
+										<span className="sr-only">Mês atual:</span>
+										<MoneyValues
+											amount={category.currentAmount}
+											className="font-semibold"
+										/>
+									</span>
 								</p>
 							</div>
 							<PercentageChangeIndicator
--- a/src/features/dashboard/components/widgets/inbox-widget.tsx
+++ b/src/features/dashboard/components/widgets/inbox-widget.tsx
@@ -6,6 +6,7 @@ import {
 	RiDeleteBinLine,
 } from "@remixicon/react";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -19,6 +20,11 @@ import { TransactionDialog } from "@/features/transactions/components/dialogs/tr
 import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { resolveLogoSrc } from "@/shared/lib/logo";

@@ -46,6 +52,24 @@ function getDateString(date: Date | string | null | undefined): string | null {
 	return date.toISOString().slice(0, 10);
 }

+function findMatchingLogo(
+	sourceAppName: string | null,
+	logoMap: Record<string, string>,
+): string | null {
+	if (!sourceAppName) return null;
+
+	const appName = sourceAppName.toLowerCase();
+	if (logoMap[appName]) return resolveLogoSrc(logoMap[appName]);
+
+	for (const [name, logo] of Object.entries(logoMap)) {
+		if (name.includes(appName) || appName.includes(name)) {
+			return resolveLogoSrc(logo);
+		}
+	}
+
+	return null;
+}
+
 export function InboxWidget({
 	snapshot,
 	quickActionOptions,
@@ -149,13 +173,18 @@ export function InboxWidget({
 	if (snapshot.pendingCount === 0) {
 		return (
 			<WidgetEmptyState
-				icon={<RiCheckboxCircleFill color="green" className="size-6" />}
+				icon={<RiCheckboxCircleFill className="size-6 text-success" />}
 				title="Tudo em dia"
 				description="Nenhum pré-lançamento aguardando revisão."
 			/>
 		);
 	}

+	const remainingCount = Math.max(
+		snapshot.pendingCount - snapshot.recentItems.length,
+		0,
+	);
+
 	return (
 		<div className="flex flex-col">
 			{snapshot.recentItems.map((item) => {
@@ -168,17 +197,12 @@ export function InboxWidget({
 					parsedAmount !== null && Number.isFinite(parsedAmount)
 						? parsedAmount
 						: null;
-				const logoKey = item.sourceAppName?.toLowerCase() ?? "";
-				const rawLogo = snapshot.logoMap[logoKey] ?? null;
-				const logoSrc = resolveLogoSrc(rawLogo);
+				const logoSrc = findMatchingLogo(item.sourceAppName, snapshot.logoMap);
 				const displayLogo = logoSrc ?? DEFAULT_INBOX_APP_LOGO;

 				return (
-					<div
-						key={item.id}
-						className="flex items-center justify-between py-1.5"
-					>
-						<div className="flex flex-1 items-center gap-2">
+					<div key={item.id} className="flex items-center justify-between py-2">
+						<div className="flex min-w-0 flex-1 items-center gap-2">
 							<Image
 								src={displayLogo}
 								alt={item.sourceAppName ?? ""}
@@ -188,52 +212,74 @@ export function InboxWidget({
 								unoptimized
 							/>

-							<div>
-								<p className="text-sm font-medium text-foreground">
-									{displayName.length > 30
-										? `${displayName.slice(0, 30)}...`
-										: displayName}
+							<div className="min-w-0">
+								<p className="truncate text-sm font-medium text-foreground">
+									{displayName}
 								</p>
-								<div className="flex items-center gap-2 text-xs text-muted-foreground">
-									{item.sourceAppName && <span>{item.sourceAppName}</span>}
+								<div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+									{item.sourceAppName && (
+										<span className="truncate">{item.sourceAppName}</span>
+									)}
 									<span className="text-muted-foreground/60">
-										{relativeTime(item.createdAt)}
+										{relativeTime(item.notificationTimestamp)}
 									</span>
 								</div>
 							</div>
 						</div>

-						<div className="flex shrink-0 flex-col items-end">
+						<div className="ml-2 flex shrink-0 items-center gap-1">
 							{amount !== null && (
 								<MoneyValues className="font-medium" amount={amount} />
 							)}
+							{amount === null && (
+								<span className="max-w-20 text-right text-xs leading-tight text-muted-foreground">
+									Valor não identificado
+								</span>
+							)}
 							<div className="flex items-center">
-								<Button
-									size="icon-sm"
-									variant="ghost"
-									className="size-6 text-muted-foreground hover:text-foreground"
-									onClick={() => handleProcessRequest(item)}
-									aria-label="Processar notificação"
-									title="Processar"
-								>
-									<RiCheckLine className="size-3.5" />
-								</Button>
-								<Button
-									size="icon-sm"
-									variant="ghost"
-									className="size-6 text-muted-foreground hover:text-destructive"
-									onClick={() => handleDiscardRequest(item)}
-									aria-label="Descartar notificação"
-									title="Descartar"
-								>
-									<RiDeleteBinLine className="size-3.5" />
-								</Button>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											size="icon-sm"
+											variant="ghost"
+											className="text-muted-foreground hover:text-foreground"
+											onClick={() => handleProcessRequest(item)}
+											aria-label="Lançar notificação"
+										>
+											<RiCheckLine className="size-3.5" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent side="top">Lançar</TooltipContent>
+								</Tooltip>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											size="icon-sm"
+											variant="ghost"
+											className="text-muted-foreground hover:text-destructive"
+											onClick={() => handleDiscardRequest(item)}
+											aria-label="Descartar notificação"
+										>
+											<RiDeleteBinLine className="size-3.5" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent side="top">Descartar</TooltipContent>
+								</Tooltip>
 							</div>
 						</div>
 					</div>
 				);
 			})}

+			{remainingCount > 0 && (
+				<Link
+					href="/inbox"
+					className="mt-2 inline-flex items-center justify-center text-xs font-medium text-muted-foreground transition-colors hover:text-primary"
+				>
+					+ {remainingCount} pendentes · Revisar todos
+				</Link>
+			)}
+
 			<TransactionDialog
 				mode="create"
 				open={processOpen}
--- a/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx
+++ b/src/features/dashboard/components/widgets/income-expense-balance-widget.tsx
@@ -1,7 +1,14 @@
 "use client";

 import { RiLineChartLine } from "@remixicon/react";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import {
+	Bar,
+	CartesianGrid,
+	ComposedChart,
+	Line,
+	ReferenceLine,
+	XAxis,
+} from "recharts";
 import type { IncomeExpenseBalanceData } from "@/features/dashboard/overview/income-expense-balance-queries";
 import { CardContent } from "@/shared/components/ui/card";
 import {
@@ -11,6 +18,7 @@ import {
 } from "@/shared/components/ui/chart";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatCurrency } from "@/shared/utils/currency";
+import { formatCompactPeriodLabel } from "@/shared/utils/period";

 type IncomeExpenseBalanceWidgetProps = {
 	data: IncomeExpenseBalanceData;
@@ -19,15 +27,15 @@ type IncomeExpenseBalanceWidgetProps = {
 const chartConfig = {
 	receita: {
 		label: "Receita",
-		color: "var(--chart-1)",
+		color: "var(--success)",
 	},
 	despesa: {
 		label: "Despesa",
-		color: "var(--chart-2)",
+		color: "var(--destructive)",
 	},
 	balanco: {
 		label: "Balanço",
-		color: "var(--chart-3)",
+		color: "var(--primary)",
 	},
 } satisfies ChartConfig;

@@ -35,7 +43,7 @@ export function IncomeExpenseBalanceWidget({
 	data,
 }: IncomeExpenseBalanceWidgetProps) {
 	const chartData = data.months.map((month) => ({
-		month: month.monthLabel,
+		month: formatCompactPeriodLabel(month.month).toLowerCase(),
 		receita: month.income,
 		despesa: month.expense,
 		balanco: month.balance,
@@ -59,16 +67,18 @@ export function IncomeExpenseBalanceWidget({
 	}

 	return (
-		<CardContent className="space-y-4 px-0">
+		<CardContent className="space-y-2 px-0">
 			<ChartContainer
 				config={chartConfig}
 				className="h-[270px] w-full aspect-auto"
 			>
-				<BarChart
+				<ComposedChart
 					data={chartData}
 					margin={{ top: 20, right: 10, left: 10, bottom: 5 }}
+					accessibilityLayer
 				>
 					<CartesianGrid strokeDasharray="3 3" vertical={false} />
+					<ReferenceLine y={0} stroke="var(--border)" />
 					<XAxis
 						dataKey="month"
 						tickLine={false}
@@ -81,8 +91,15 @@ export function IncomeExpenseBalanceWidget({
 								return null;
 							}

+							const month = payload[0]?.payload.month as string | undefined;
+
 							return (
 								<div className="rounded-lg border bg-background p-2 shadow-sm">
+									{month ? (
+										<p className="mb-2 text-xs font-medium text-muted-foreground">
+											{month}
+										</p>
+									) : null}
 									<div className="grid gap-2">
 										{payload.map((entry) => {
 											const config =
@@ -111,7 +128,7 @@ export function IncomeExpenseBalanceWidget({
 								</div>
 							);
 						}}
-						cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }}
+						cursor={{ fill: "var(--muted)", opacity: 0.3 }}
 					/>
 					<Bar
 						dataKey="receita"
@@ -125,42 +142,26 @@ export function IncomeExpenseBalanceWidget({
 						radius={[4, 4, 0, 0]}
 						maxBarSize={60}
 					/>
-					<Bar
+					<Line
 						dataKey="balanco"
-						fill={chartConfig.balanco.color}
-						radius={[4, 4, 0, 0]}
-						maxBarSize={60}
+						type="monotone"
+						stroke={chartConfig.balanco.color}
+						strokeWidth={2}
+						dot={{ fill: chartConfig.balanco.color, r: 3 }}
+						activeDot={{ r: 5 }}
 					/>
-				</BarChart>
+				</ComposedChart>
 			</ChartContainer>
-			<div className="flex items-center justify-center gap-6">
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.receita.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.receita.label}
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.despesa.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.despesa.label}
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.balanco.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.balanco.label}
-					</span>
-				</div>
+			<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+				{Object.values(chartConfig).map((config) => (
+					<div key={config.label} className="flex items-center gap-1.5">
+						<div
+							className="size-2 rounded-full"
+							style={{ backgroundColor: config.color }}
+						/>
+						<span>{config.label}</span>
+					</div>
+				))}
 			</div>
 		</CardContent>
 	);
--- a/src/features/dashboard/components/widgets/my-accounts-widget.tsx
+++ b/src/features/dashboard/components/widgets/my-accounts-widget.tsx
@@ -1,8 +1,8 @@
 "use client";

 import {
+	RiArrowRightLine,
 	RiBarChartBoxLine,
-	RiExternalLinkLine,
 	RiEyeLine,
 	RiEyeOffLine,
 } from "@remixicon/react";
@@ -24,7 +24,9 @@ import {
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { isAccountInactive } from "@/shared/lib/accounts/constants";
 import { resolveLogoSrc } from "@/shared/lib/logo";
+import { buildInitials } from "@/shared/utils/initials";
 import { formatPeriodForUrl } from "@/shared/utils/period";
+import { cn } from "@/shared/utils/ui";

 type MyAccountsWidgetProps = {
 	accounts: DashboardAccount[];
@@ -54,9 +56,6 @@ export function MyAccountsWidget({
 		: activeAccounts.filter((account) => !account.excludeFromBalance);
 	const displayedAccounts = visibleAccounts.slice(0, 5);
 	const remainingCount = visibleAccounts.length - displayedAccounts.length;
-	const hiddenExcludedAccountsCount = showExcludedAccounts
-		? 0
-		: excludedAccountsCount;
 	const toggleButtonLabel = showExcludedAccounts
 		? "Ocultar contas não consideradas"
 		: "Mostrar contas não consideradas";
@@ -81,7 +80,7 @@ export function MyAccountsWidget({
 		<>
 			<div className="flex items-start justify-between gap-3 py-1">
 				<div className="space-y-1">
-					<p className="text-sm text-muted-foreground">Saldo Total</p>
+					<p className="text-sm text-muted-foreground">Saldo total</p>
 					<MoneyValues className="text-2xl font-medium" amount={totalBalance} />
 				</div>

@@ -106,51 +105,46 @@ export function MyAccountsWidget({
 						</TooltipTrigger>
 						<TooltipContent side="left" className="max-w-xs">
 							<p className="text-xs">{toggleButtonLabel}</p>
+							{!showExcludedAccounts ? (
+								<p className="mt-1 text-xs text-background/70">
+									{excludedAccountsCount}{" "}
+									{excludedAccountsCount === 1
+										? "conta não considerada oculta"
+										: "contas não consideradas ocultas"}
+								</p>
+							) : null}
 						</TooltipContent>
 					</Tooltip>
 				) : null}
 			</div>

-			{hiddenExcludedAccountsCount > 0 ? (
-				<p className="pb-2 text-xs text-muted-foreground">
-					{hiddenExcludedAccountsCount}{" "}
-					{hiddenExcludedAccountsCount === 1
-						? "conta não considerada oculta"
-						: "contas não consideradas ocultas"}
-				</p>
-			) : null}
-
 			<div>
 				{activeAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={
-								<RiBarChartBoxLine className="size-6 text-muted-foreground" />
-							}
-							title="Você ainda não adicionou nenhuma conta"
-							description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={
+							<RiBarChartBoxLine className="size-6 text-muted-foreground" />
+						}
+						title="Você ainda não adicionou nenhuma conta"
+						description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
+					/>
 				) : displayedAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
-							title="As contas não consideradas estão ocultas"
-							description="Use o botão no topo do widget para mostrá-las novamente."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
+						title="As contas não consideradas estão ocultas"
+						description="Use o botão no topo do widget para mostrá-las novamente."
+					/>
 				) : (
 					<ul className="flex flex-col">
 						{displayedAccounts.map((account, index) => {
 							const logoSrc = resolveLogoSrc(account.logo);

 							return (
-								<div
+								<li
 									key={account.id}
-									className="flex items-center justify-between transition-all duration-300 py-1.5 "
+									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 size-9.5 overflow-hidden">
+										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
 											{logoSrc ? (
 												<Image
 													src={logoSrc}
@@ -160,7 +154,11 @@ export function MyAccountsWidget({
 													className="object-contain rounded-full"
 													priority={index === 0}
 												/>
-											) : null}
+											) : (
+												<span className="text-xs font-medium text-primary">
+													{buildInitials(account.name)}
+												</span>
+											)}
 										</div>

 										<div className="min-w-0">
@@ -172,44 +170,41 @@ export function MyAccountsWidget({
 												className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 											>
 												<span className="truncate">{account.name}</span>
-												<RiExternalLinkLine
-													className="size-3 shrink-0 text-muted-foreground"
-													aria-hidden
-												/>
 											</Link>

-											{account.excludeFromBalance ? (
-												<Tooltip>
-													<TooltipTrigger asChild>
-														<span className="inline-flex cursor-help ml-2">
-															<Badge className="font-normal" variant="info">
-																Não considerada
-															</Badge>
-														</span>
-													</TooltipTrigger>
-													<TooltipContent side="top" className="max-w-xs">
-														<p className="text-xs">
-															Esta conta aparece na lista, mas não entra no
-															cálculo do saldo total porque está marcada para
-															desconsiderar do saldo total.
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											) : null}
-
 											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 												<span className="truncate">{account.accountType}</span>
+												{account.excludeFromBalance ? (
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<span className="inline-flex cursor-help">
+																<Badge className="font-normal" variant="info">
+																	Não considerada
+																</Badge>
+															</span>
+														</TooltipTrigger>
+														<TooltipContent side="top" className="max-w-xs">
+															<p className="text-xs">
+																Esta conta aparece na lista, mas não entra no
+																cálculo do saldo total.
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												) : null}
 											</div>
 										</div>
 									</div>

 									<div className="flex flex-col items-end gap-0.5 text-right">
 										<MoneyValues
-											className="font-medium"
+											className={cn(
+												"font-medium",
+												account.balance < 0 && "text-destructive",
+											)}
 											amount={account.balance}
 										/>
 									</div>
-								</div>
+								</li>
 							);
 						})}
 					</ul>
@@ -217,8 +212,14 @@ export function MyAccountsWidget({
 			</div>

 			{remainingCount > 0 ? (
-				<CardFooter className="border-border/60 border-t pt-4 text-sm text-muted-foreground">
-					+{remainingCount} contas não exibidas
+				<CardFooter className="border-border/60 border-t pt-4">
+					<Link
+						href="/accounts"
+						className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+					>
+						+{remainingCount} contas não exibidas
+						<RiArrowRightLine className="size-4" aria-hidden />
+					</Link>
 				</CardFooter>
 			) : null}
 		</>
--- a/src/features/dashboard/components/widgets/payers-widget.tsx
+++ b/src/features/dashboard/components/widgets/payers-widget.tsx
@@ -1,10 +1,6 @@
 "use client";

-import {
-	RiExternalLinkLine,
-	RiGroupLine,
-	RiVerifiedBadgeFill,
-} from "@remixicon/react";
+import { RiGroupLine, RiVerifiedBadgeFill } from "@remixicon/react";
 import Link from "next/link";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import type { DashboardPagador } from "@/features/dashboard/lib/payers-queries";
@@ -14,6 +10,11 @@ import {
 	AvatarFallback,
 	AvatarImage,
 } from "@/shared/components/ui/avatar";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { getAvatarSrc } from "@/shared/lib/payers/utils";
 import { buildInitials } from "@/shared/utils/initials";
@@ -33,7 +34,7 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 				/>
 			) : (
 				<div className="flex flex-col">
-					{payers.map((payer) => {
+					{payers.map((payer, index) => {
 						const initials = buildInitials(payer.name);
 						const hasValidPercentageChange =
 							typeof payer.percentageChange === "number" &&
@@ -45,8 +46,11 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 						return (
 							<div
 								key={payer.id}
-								className="flex items-center justify-between transition-all duration-300 py-1.5"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
 								<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
 									<Avatar className="size-9.5 shrink-0">
 										<AvatarImage
@@ -64,18 +68,24 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										>
 											<span className="truncate font-medium">{payer.name}</span>
 											{payer.isAdmin && (
-												<RiVerifiedBadgeFill
-													className="size-4 shrink-0 text-blue-500"
-													aria-hidden
-												/>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<span className="inline-flex shrink-0">
+															<RiVerifiedBadgeFill
+																className="size-4 text-blue-500"
+																aria-hidden
+															/>
+															<span className="sr-only">Pessoa principal</span>
+														</span>
+													</TooltipTrigger>
+													<TooltipContent side="top">
+														Pessoa principal
+													</TooltipContent>
+												</Tooltip>
 											)}
-											<RiExternalLinkLine
-												className="size-3 shrink-0 text-muted-foreground"
-												aria-hidden
-											/>
 										</Link>
 										<p className="truncate text-xs text-muted-foreground">
-											{payer.email ?? "Sem email cadastrado"}
+											Despesas no período
 										</p>
 									</div>
 								</div>
@@ -85,7 +95,12 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										className="font-medium"
 										amount={payer.totalExpenses}
 									/>
-									<PercentageChangeIndicator value={percentageChange} />
+									<div className="flex items-center gap-1 text-xs text-muted-foreground">
+										<PercentageChangeIndicator value={percentageChange} />
+										{percentageChange !== null ? (
+											<span>vs. mês ant.</span>
+										) : null}
+									</div>
 								</div>
 							</div>
 						);
--- a/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
+++ b/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { RiArrowDownSFill, RiStore3Line } from "@remixicon/react";
+import { RiFileList2Line, RiStore3Line } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { PurchasesByCategoryData } from "@/features/dashboard/categories/purchases-by-category-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
@@ -8,7 +8,9 @@ import MoneyValues from "@/shared/components/money-values";
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "@/shared/components/ui/select";
@@ -129,18 +131,18 @@ export function PurchasesByCategoryWidget({
 					</SelectTrigger>
 					<SelectContent>
 						{Object.entries(categoriesByType).map(([type, categories]) => (
-							<div key={type}>
-								<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+							<SelectGroup key={type}>
+								<SelectLabel className="font-medium">
 									{CATEGORY_TYPE_LABEL[
 										type as keyof typeof CATEGORY_TYPE_LABEL
 									] ?? type}
-								</div>
+								</SelectLabel>
 								{categories.map((category) => (
 									<SelectItem key={category.id} value={category.id}>
 										{category.name}
 									</SelectItem>
 								))}
-							</div>
+							</SelectGroup>
 						))}
 					</SelectContent>
 				</Select>
@@ -148,12 +150,12 @@ export function PurchasesByCategoryWidget({

 			{currentTransactions.length === 0 ? (
 				<WidgetEmptyState
-					icon={<RiArrowDownSFill className="size-6 text-muted-foreground" />}
-					title="Nenhuma compra encontrada"
+					icon={<RiFileList2Line className="size-6 text-muted-foreground" />}
+					title="Nenhum lançamento encontrado"
 					description={
 						selectedCategory
 							? `Não há lançamentos na categoria "${selectedCategory.name}".`
-							: "Selecione uma categoria para visualizar as compras."
+							: "Selecione uma categoria para visualizar os lançamentos."
 					}
 				/>
 			) : (
@@ -162,9 +164,9 @@ export function PurchasesByCategoryWidget({
 						return (
 							<div
 								key={transaction.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={transaction.name} size={37} />

 									<div className="min-w-0">
--- a/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
@@ -3,6 +3,7 @@ import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurr
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
+import { getPaymentMethodIcon } from "@/shared/utils/icons";

 type RecurringExpensesWidgetProps = {
 	data: RecurringExpensesData;
@@ -10,10 +11,10 @@ type RecurringExpensesWidgetProps = {

 const formatOccurrences = (value: number | null) => {
 	if (!value) {
-		return "Recorrência contínua";
+		return "Repete mensalmente";
 	}

-	return `${value} recorrências mensais`;
+	return `Repete por ${value} ${value === 1 ? "mês" : "meses"}`;
 };

 export function RecurringExpensesWidget({
@@ -23,7 +24,7 @@ export function RecurringExpensesWidget({
 		return (
 			<WidgetEmptyState
 				icon={<RiRefreshLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa recorrente"
+				title="Nenhuma despesa recorrente encontrada"
 				description="Lançamentos recorrentes aparecerão aqui conforme forem registrados."
 			/>
 		);
@@ -31,33 +32,39 @@ export function RecurringExpensesWidget({

 	return (
 		<div className="flex flex-col">
-			{data.expenses.map((expense) => {
-				return (
-					<div
-						key={expense.id}
-						className="flex items-center gap-2 transition-all duration-300 py-1.5"
-					>
-						<EstablishmentLogo name={expense.name} size={37} />
+			{[...data.expenses]
+				.sort((a, b) => b.amount - a.amount)
+				.map((expense) => {
+					return (
+						<div
+							key={expense.id}
+							className="flex items-center gap-2 transition-all duration-300 py-1.5"
+						>
+							<EstablishmentLogo name={expense.name} size={37} />

-						<div className="min-w-0 flex-1">
-							<div className="flex items-center justify-between">
-								<p className="truncate text-foreground text-sm font-medium">
-									{expense.name}
-								</p>
+							<div className="min-w-0 flex-1">
+								<div className="flex items-center justify-between">
+									<p className="truncate text-foreground text-sm font-medium">
+										{expense.name}
+									</p>

-								<MoneyValues className="font-medium" amount={expense.amount} />
-							</div>
+									<MoneyValues
+										className="font-medium"
+										amount={expense.amount}
+									/>
+								</div>

-							<div className="flex items-center justify-between text-xs text-muted-foreground">
-								<span className="inline-flex items-center gap-1">
-									{expense.paymentMethod}
-								</span>
-								<span>{formatOccurrences(expense.recurrenceCount)}</span>
+								<div className="flex items-center justify-between text-xs text-muted-foreground">
+									<span className="inline-flex items-center gap-1 [&_svg]:size-3.5">
+										{getPaymentMethodIcon(expense.paymentMethod)}
+										{expense.paymentMethod}
+									</span>
+									<span>{formatOccurrences(expense.recurrenceCount)}</span>
+								</div>
 							</div>
 						</div>
-					</div>
-				);
-			})}
+					);
+				})}
 		</div>
 	);
 }
--- a/src/features/dashboard/components/widgets/spending-overview-widget.tsx
+++ b/src/features/dashboard/components/widgets/spending-overview-widget.tsx
@@ -15,13 +15,11 @@ import { TopExpensesWidget } from "./top-expenses-widget";

 type SpendingOverviewWidgetProps = {
 	topExpensesAll: TopExpensesData;
-	topExpensesCardOnly: TopExpensesData;
 	topEstablishmentsData: TopEstablishmentsData;
 };

 export function SpendingOverviewWidget({
 	topExpensesAll,
-	topExpensesCardOnly,
 	topEstablishmentsData,
 }: SpendingOverviewWidgetProps) {
 	const [activeTab, setActiveTab] = useState<"expenses" | "establishments">(
@@ -54,10 +52,7 @@ export function SpendingOverviewWidget({
 			</TabsList>

 			<TabsContent value="expenses" className="mt-2">
-				<TopExpensesWidget
-					allExpenses={topExpensesAll}
-					cardOnlyExpenses={topExpensesCardOnly}
-				/>
+				<TopExpensesWidget data={topExpensesAll} />
 			</TabsContent>

 			<TabsContent value="establishments" className="mt-2">
--- a/src/features/dashboard/components/widgets/top-establishments-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-establishments-widget.tsx
@@ -28,13 +28,16 @@ export function TopEstablishmentsWidget({
 				/>
 			) : (
 				<div className="flex flex-col">
-					{data.establishments.map((establishment) => {
+					{data.establishments.map((establishment, index) => {
 						return (
 							<div
 								key={establishment.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={establishment.name} size={37} />

 									<div className="min-w-0">
@@ -42,7 +45,8 @@ export function TopEstablishmentsWidget({
 											{establishment.name}
 										</p>
 										<p className="text-xs text-muted-foreground">
-											{formatOccurrencesLabel(establishment.occurrences)}
+											{formatOccurrencesLabel(establishment.occurrences)} ·
+											total acumulado
 										</p>
 									</div>
 								</div>
--- a/src/features/dashboard/components/widgets/top-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-expenses-widget.tsx
@@ -1,20 +1,18 @@
 "use client";

 import { RiArrowUpDoubleLine } from "@remixicon/react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type {
 	TopExpense,
 	TopExpensesData,
 } from "@/features/dashboard/expenses/top-expenses-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
-import { Switch } from "@/shared/components/ui/switch";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatTransactionDate } from "@/shared/utils/date";

 type TopExpensesWidgetProps = {
-	allExpenses: TopExpensesData;
-	cardOnlyExpenses: TopExpensesData;
+	data: TopExpensesData;
 };

 const shouldIncludeExpense = (expense: TopExpense) => {
@@ -31,75 +29,34 @@ const shouldIncludeExpense = (expense: TopExpense) => {
 	return true;
 };

-const isCardExpense = (expense: TopExpense) =>
-	expense.paymentMethod?.toLowerCase().includes("cartão") ?? false;
-
-export function TopExpensesWidget({
-	allExpenses,
-	cardOnlyExpenses,
-}: TopExpensesWidgetProps) {
-	const [cardOnly, setCardOnly] = useState(false);
-	const normalizedAllExpenses = useMemo(() => {
-		return allExpenses.expenses.filter(shouldIncludeExpense);
-	}, [allExpenses]);
-
-	const normalizedCardOnlyExpenses = useMemo(() => {
-		const merged = [...cardOnlyExpenses.expenses, ...normalizedAllExpenses];
-		const seen = new Set<string>();
-
-		return merged.filter((expense) => {
-			if (seen.has(expense.id)) {
-				return false;
-			}
-
-			if (!isCardExpense(expense) || !shouldIncludeExpense(expense)) {
-				return false;
-			}
-
-			seen.add(expense.id);
-			return true;
-		});
-	}, [cardOnlyExpenses, normalizedAllExpenses]);
-
-	const data = cardOnly
-		? { expenses: normalizedCardOnlyExpenses }
-		: { expenses: normalizedAllExpenses };
+export function TopExpensesWidget({ data }: TopExpensesWidgetProps) {
+	const expenses = useMemo(
+		() => data.expenses.filter(shouldIncludeExpense),
+		[data.expenses],
+	);

 	return (
-		<div className="flex flex-col gap-4 px-0">
-			<div className="flex items-center justify-between gap-3">
-				<label
-					htmlFor="card-only-toggle"
-					className="text-sm text-muted-foreground"
-				>
-					Apenas cartões
-				</label>
-				<Switch
-					id="card-only-toggle"
-					checked={cardOnly}
-					onCheckedChange={setCardOnly}
+		<div className="flex flex-col px-0">
+			{expenses.length === 0 ? (
+				<WidgetEmptyState
+					icon={
+						<RiArrowUpDoubleLine className="size-6 text-muted-foreground" />
+					}
+					title="Nenhuma despesa encontrada"
+					description="Quando houver despesas registradas, elas aparecerão aqui."
 				/>
-			</div>
-
-			{data.expenses.length === 0 ? (
-				<div className="-mt-10">
-					<WidgetEmptyState
-						icon={
-							<RiArrowUpDoubleLine className="size-6 text-muted-foreground" />
-						}
-						title="Nenhuma despesa encontrada"
-						description="Quando houver despesas registradas, elas aparecerão aqui."
-					/>
-				</div>
 			) : (
 				<div className="flex flex-col">
-					{data.expenses.map((expense) => {
+					{expenses.map((expense, index) => {
 						return (
 							<div
 								key={expense.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={expense.name} size={37} />

 									<div className="min-w-0">
--- a/src/features/dashboard/components/widgets/widget-settings-dialog.tsx
+++ b/src/features/dashboard/components/widgets/widget-settings-dialog.tsx
@@ -21,6 +21,7 @@ type WidgetSettingsDialogProps = {
 	onToggleWidget: (widgetId: string) => void;
 	onReset: () => void;
 	triggerClassName?: string;
+	triggerLabel?: string;
 };

 export function WidgetSettingsDialog({
@@ -28,6 +29,7 @@ export function WidgetSettingsDialog({
 	onToggleWidget,
 	onReset,
 	triggerClassName,
+	triggerLabel = "Widgets",
 }: WidgetSettingsDialogProps) {
 	const [open, setOpen] = useState(false);

@@ -40,12 +42,12 @@ export function WidgetSettingsDialog({
 					className={cn("gap-2", triggerClassName)}
 				>
 					<RiSettings4Line className="size-4" />
-					Widgets
+					{triggerLabel}
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader>
-					<DialogTitle>Configurar Widgets</DialogTitle>
+					<DialogTitle>Configurar widgets</DialogTitle>
 					<DialogDescription>
 						Escolha quais widgets deseja exibir no seu dashboard.
 					</DialogDescription>
@@ -91,7 +93,7 @@ export function WidgetSettingsDialog({
 						className="gap-2"
 					>
 						<RiRefreshLine className="size-4" />
-						Restaurar Padrão
+						Restaurar padrão
 					</Button>
 				</DialogFooter>
 			</DialogContent>