feat(navegacao): adiciona atalhos financeiros e seletor mensal

src/app/(dashboard)/layout.tsx

@@ -1,10 +1,12 @@
 import { connection } from "next/server";
 import { fetchDashboardNavbarData } from "@/features/dashboard/lib/navbar-queries";
 import { AppNavbar } from "@/shared/components/navigation/navbar/app-navbar";
+import { AppPreferencesProvider } from "@/shared/components/providers/app-preferences-provider";
 import { LogoDevProvider } from "@/shared/components/providers/logo-dev-provider";
 import { PrivacyProvider } from "@/shared/components/providers/privacy-provider";
 import { getUserSession } from "@/shared/lib/auth/server";
 import { isLogoDevEnabled } from "@/shared/lib/logo/server";
+import { fetchAppPreferences } from "@/shared/lib/preferences/queries";
 
 export default async function DashboardLayout({
 	children,
@@ -13,26 +15,32 @@ export default async function DashboardLayout({
 }>) {
 	await connection();
 	const session = await getUserSession();
-	const navbarData = await fetchDashboardNavbarData(session.user.id);
+	const [navbarData, appPreferences] = await Promise.all([
+		fetchDashboardNavbarData(session.user.id),
+		fetchAppPreferences(session.user.id),
+	]);
 	const logoDevEnabled = isLogoDevEnabled();
 
 	return (
 		<LogoDevProvider enabled={logoDevEnabled}>
-			<PrivacyProvider>
+			<AppPreferencesProvider {...appPreferences}>
-				<AppNavbar
+				<PrivacyProvider>
-					user={{ ...session.user, image: session.user.image ?? null }}
+					<AppNavbar
-					payerAvatarUrl={navbarData.payerAvatarUrl}
+						user={{ ...session.user, image: session.user.image ?? null }}
-					inboxPendingCount={navbarData.inboxPendingCount}
+						payerAvatarUrl={navbarData.payerAvatarUrl}
-					notificationsSnapshot={navbarData.notificationsSnapshot}
+						inboxPendingCount={navbarData.inboxPendingCount}
-				/>
+						notificationsSnapshot={navbarData.notificationsSnapshot}
-				<div className="relative flex flex-1 flex-col pt-16">
+						financeLinks={navbarData.financeLinks}
-					<div className="@container/main flex flex-1 flex-col gap-2">
+					/>
-						<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
+					<div className="relative flex flex-1 flex-col pt-16">
-							{children}
+						<div className="@container/main flex flex-1 flex-col gap-2">
+							<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
+								{children}
+							</div>
 						</div>
 					</div>
-				</div>
+				</PrivacyProvider>
-			</PrivacyProvider>
+			</AppPreferencesProvider>
 		</LogoDevProvider>
 	);
 }

src/features/dashboard/lib/navbar-queries.ts

@@ -1,10 +1,13 @@
-import { eq } from "drizzle-orm";
+import { and, asc, eq, ilike, not, sql } from "drizzle-orm";
 import { cacheLife, cacheTag } from "next/cache";
-import { payers } from "@/db/schema";
+import { cards, financialAccounts, payers, transactions } from "@/db/schema";
 import { fetchPendingInboxCount } from "@/features/inbox/queries";
+import type { NavbarFinanceLinks } from "@/shared/components/navigation/navbar/nav-items";
+import { INITIAL_BALANCE_NOTE } from "@/shared/lib/accounts/constants";
 import { db } from "@/shared/lib/db";
 import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
 import { getBusinessDateString } from "@/shared/utils/date";
+import { safeToNumber } from "@/shared/utils/number";
 import {
 	type DashboardNotificationsSnapshot,
 	fetchDashboardNotifications,
@@ -14,13 +17,13 @@ type DashboardNavbarData = {
 	payerAvatarUrl: string | null;
 	inboxPendingCount: number;
 	notificationsSnapshot: DashboardNotificationsSnapshot;
+	financeLinks: NavbarFinanceLinks;
 };
 
 async function fetchAdminPayerAvatarUrl(
 	userId: string,
+	adminPayerId: string | null,
 ): Promise<string | null> {
-	const adminPayerId = await getAdminPayerId(userId);
-
 	if (!adminPayerId) {
 		return null;
 	}
@@ -29,7 +32,7 @@ async function fetchAdminPayerAvatarUrl(
 		columns: {
 			avatarUrl: true,
 		},
-		where: eq(payers.id, adminPayerId),
+		where: and(eq(payers.id, adminPayerId), eq(payers.userId, userId)),
 	});
 
 	return payer?.avatarUrl ?? null;
@@ -39,17 +42,97 @@ async function fetchDashboardNavbarDataInternal(
 	userId: string,
 ): Promise<DashboardNavbarData> {
 	const currentPeriod = getBusinessDateString().slice(0, 7);
-	const [payerAvatarUrl, notificationsSnapshot, inboxPendingCount] =
+	const adminPayerId = await getAdminPayerId(userId);
-		await Promise.all([
+	const [
-			fetchAdminPayerAvatarUrl(userId),
+		payerAvatarUrl,
-			fetchDashboardNotifications(userId, currentPeriod),
+		notificationsSnapshot,
-			fetchPendingInboxCount(userId),
+		inboxPendingCount,
-		]);
+		activeCards,
+		activeAccounts,
+	] = await Promise.all([
+		fetchAdminPayerAvatarUrl(userId, adminPayerId),
+		fetchDashboardNotifications(userId, currentPeriod),
+		fetchPendingInboxCount(userId),
+		db
+			.select({
+				id: cards.id,
+				name: cards.name,
+				logo: cards.logo,
+				amount: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
+			})
+			.from(cards)
+			.leftJoin(
+				transactions,
+				and(
+					eq(transactions.cardId, cards.id),
+					eq(transactions.userId, userId),
+					eq(transactions.period, currentPeriod),
+				),
+			)
+			.where(and(eq(cards.userId, userId), not(ilike(cards.status, "inativo"))))
+			.groupBy(cards.id, cards.name, cards.logo)
+			.orderBy(asc(cards.name)),
+		db
+			.select({
+				id: financialAccounts.id,
+				name: financialAccounts.name,
+				logo: financialAccounts.logo,
+				initialBalance: financialAccounts.initialBalance,
+				balanceMovements: sql<number>`
+					coalesce(
+						sum(
+							case
+								when ${transactions.note} = ${INITIAL_BALANCE_NOTE} then 0
+								else ${transactions.amount}
+							end
+						),
+						0
+					)
+				`,
+			})
+			.from(financialAccounts)
+			.leftJoin(
+				transactions,
+				and(
+					eq(transactions.accountId, financialAccounts.id),
+					eq(transactions.userId, userId),
+					eq(transactions.isSettled, true),
+					adminPayerId ? eq(transactions.payerId, adminPayerId) : sql`false`,
+				),
+			)
+			.where(
+				and(
+					eq(financialAccounts.userId, userId),
+					not(ilike(financialAccounts.status, "inativa")),
+				),
+			)
+			.groupBy(
+				financialAccounts.id,
+				financialAccounts.name,
+				financialAccounts.logo,
+				financialAccounts.initialBalance,
+			)
+			.orderBy(asc(financialAccounts.name)),
+	]);
 
 	return {
 		payerAvatarUrl,
 		inboxPendingCount,
 		notificationsSnapshot,
+		financeLinks: {
+			cards: activeCards.map((card) => ({
+				...card,
+				amount: Math.abs(safeToNumber(card.amount)),
+			})),
+			accounts: activeAccounts.map((account) => ({
+				id: account.id,
+				name: account.name,
+				logo: account.logo,
+				amount:
+					safeToNumber(account.initialBalance) +
+					safeToNumber(account.balanceMovements),
+			})),
+		},
 	};
 }
 

src/shared/components/month-picker/month-navigation.tsx

@@ -1,9 +1,22 @@
 "use client";
 
+import { RiArrowDropDownLine, RiCalendarLine } from "@remixicon/react";
 import { useRouter } from "next/navigation";
-import { useEffect, useTransition } from "react";
+import { useEffect, useRef, useState, useTransition } from "react";
+import { Button } from "@/shared/components/ui/button";
 import { Card } from "@/shared/components/ui/card";
-import { getNextPeriod, getPreviousPeriod } from "@/shared/utils/period";
+import { MonthPicker } from "@/shared/components/ui/month-picker";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import {
+	dateToPeriod,
+	getNextPeriod,
+	getPreviousPeriod,
+	periodToDate,
+} from "@/shared/utils/period";
 import LoadingSpinner from "./loading-spinner";
 import NavigationButton from "./nav-button";
 import ReturnButton from "./return-button";
@@ -15,6 +28,8 @@ export default function MonthNavigation() {
 
 	const router = useRouter();
 	const [isPending, startTransition] = useTransition();
+	const [isPickerOpen, setIsPickerOpen] = useState(false);
+	const closePickerTimeout = useRef<ReturnType<typeof setTimeout>>(null);
 
 	const currentMonthLabel = `${currentMonth.charAt(0).toUpperCase()}${currentMonth.slice(1)} ${currentYear}`;
 	const prevTarget = buildHref(getPreviousPeriod(period));
@@ -30,31 +45,88 @@ export default function MonthNavigation() {
 		}
 	}, [router, prevTarget, nextTarget, returnTarget, isDifferentFromCurrent]);
 
+	useEffect(() => {
+		return () => {
+			if (closePickerTimeout.current) {
+				clearTimeout(closePickerTimeout.current);
+			}
+		};
+	}, []);
+
 	const handleNavigate = (href: string) => {
+		setIsPickerOpen(false);
 		startTransition(() => {
 			router.replace(href, { scroll: false });
 		});
 	};
 
+	const handlePickerOpen = () => {
+		if (isPending) {
+			return;
+		}
+		if (closePickerTimeout.current) {
+			clearTimeout(closePickerTimeout.current);
+		}
+		setIsPickerOpen(true);
+	};
+
+	const handlePickerClose = () => {
+		closePickerTimeout.current = setTimeout(() => {
+			setIsPickerOpen(false);
+		}, 150);
+	};
+
+	const handleMonthSelect = (date: Date) => {
+		handleNavigate(buildHref(dateToPeriod(date)));
+	};
+
 	return (
-		<Card className="sticky top-18 z-10 flex w-full flex-row p-4 backdrop-blur-md supports-backdrop-filter:bg-card/60">
+		<Card className="sticky top-18 z-10 flex w-full flex-row items-center justify-between gap-2 px-3 py-3 backdrop-blur-md supports-backdrop-filter:bg-card/60 sm:px-4">
-			<div className="flex items-center gap-1">
+			<div className="flex min-w-0 items-center">
 				<NavigationButton
 					direction="left"
 					disabled={isPending}
 					onClick={() => handleNavigate(prevTarget)}
 				/>
 
-				<div className="flex items-center">
+				<div className="flex min-w-0 items-center">
-					<div
+					<Popover open={isPickerOpen} onOpenChange={setIsPickerOpen}>
-						className="mx-1 space-x-1 capitalize font-semibold"
+						<PopoverTrigger asChild>
-						aria-current={!isDifferentFromCurrent ? "date" : undefined}
+							<Button
-						aria-label={`Período selecionado: ${currentMonthLabel}`}
+								variant="ghost"
-					>
+								size="sm"
-						<span>{currentMonthLabel}</span>
+								disabled={isPending}
-					</div>
+								onMouseEnter={handlePickerOpen}
-
+								onMouseLeave={handlePickerClose}
-					{isPending && <LoadingSpinner />}
+								onFocus={handlePickerOpen}
+								className="min-w-0 gap-1 px-1.5 font-semibold"
+								aria-current={!isDifferentFromCurrent ? "date" : undefined}
+								aria-label={`Selecionar período. Período atual: ${currentMonthLabel}`}
+							>
+								{isPending ? (
+									<LoadingSpinner />
+								) : (
+									<RiCalendarLine className="size-4 text-primary" />
+								)}
+								<span className="truncate capitalize">{currentMonthLabel}</span>
+								<RiArrowDropDownLine
+									className="size-4 text-muted-foreground/50"
+									aria-hidden
+								/>
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent
+							className="w-auto p-0"
+							align="start"
+							onMouseEnter={handlePickerOpen}
+							onMouseLeave={handlePickerClose}
+						>
+							<MonthPicker
+								selectedMonth={periodToDate(period)}
+								onMonthSelect={handleMonthSelect}
+							/>
+						</PopoverContent>
+					</Popover>
 				</div>
 
 				<NavigationButton

src/shared/components/month-picker/nav-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
+import { Button } from "@/shared/components/ui/button";
 
 interface NavigationButtonProps {
 	direction: "left" | "right";
@@ -16,15 +17,17 @@ export default function NavigationButton({
 	const Icon = direction === "left" ? RiArrowLeftSLine : RiArrowRightSLine;
 
 	return (
-		<button
+		<Button
+			type="button"
+			variant="ghost"
+			size="icon-sm"
 			onClick={onClick}
-			className="text-card-foreground transition-all duration-200 cursor-pointer rounded-lg p-1 hover:bg-card-foreground/10 focus:outline-hidden focus:ring-2 focus:ring-card-foreground/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
 			disabled={disabled}
 			aria-label={`Navegar para o mês ${
 				direction === "left" ? "anterior" : "seguinte"
 			}`}
 		>
-			<Icon className="text-primary" size={18} />
+			<Icon className="size-5 text-primary" />
-		</button>
+		</Button>
 	);
 }

src/shared/components/month-picker/return-button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { RiCalendarLine } from "@remixicon/react";
 import { Button } from "@/shared/components/ui/button";
 
 interface ReturnButtonProps {
@@ -10,13 +11,16 @@ interface ReturnButtonProps {
 export default function ReturnButton({ disabled, onClick }: ReturnButtonProps) {
 	return (
 		<Button
-			className="w-max h-6 lowercase"
+			type="button"
+			variant="secondary"
+			className="w-max shrink-0"
 			size="sm"
 			disabled={disabled}
 			onClick={onClick}
 			aria-label="Retornar para o mês atual"
 		>
-			Mês Atual
+			<RiCalendarLine className="size-4" />
+			<span className="hidden sm:inline">Mês atual</span>
 		</Button>
 	);
 }

src/shared/components/navigation/navbar/app-navbar.tsx

@@ -3,6 +3,7 @@ import { NotificationBell } from "@/shared/components/navigation/navbar/notifica
 import { RefreshPageButton } from "@/shared/components/refresh-page-button";
 import type { DashboardNotificationsSnapshot } from "@/shared/lib/types/notifications";
 import { checkForUpdate } from "@/shared/lib/version/check-update";
+import type { NavbarFinanceLinks } from "./nav-items";
 import { NavMenu } from "./nav-menu";
 import { NavbarShell } from "./navbar-shell";
 import { NavbarUser } from "./navbar-user";
@@ -17,6 +18,7 @@ type AppNavbarProps = {
 	payerAvatarUrl: string | null;
 	inboxPendingCount?: number;
 	notificationsSnapshot: DashboardNotificationsSnapshot;
+	financeLinks: NavbarFinanceLinks;
 };
 
 export async function AppNavbar({
@@ -24,12 +26,13 @@ export async function AppNavbar({
 	payerAvatarUrl,
 	inboxPendingCount = 0,
 	notificationsSnapshot,
+	financeLinks,
 }: AppNavbarProps) {
 	const updateCheck = await checkForUpdate();
 
 	return (
 		<NavbarShell logoHref="/dashboard" fixed>
-			<NavMenu />
+			<NavMenu financeLinks={financeLinks} />
 			<div className="ml-auto flex items-center gap-2">
 				<NotificationBell
 					notifications={notificationsSnapshot.notifications}

src/shared/components/navigation/navbar/mobile-link.tsx

@@ -1,8 +1,12 @@
 "use client";
 
+import { RiBankCard2Line, RiBankLine } from "@remixicon/react";
 import { usePathname } from "next/navigation";
 import { Badge } from "@/shared/components/ui/badge";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import { formatCurrency } from "@/shared/utils/currency";
 import { cn } from "@/shared/utils/ui";
+import type { NavbarEntityLink, NavbarFinanceLinks } from "./nav-items";
 import { NavLink } from "./nav-link";
 
 type MobileLinkProps = {
@@ -74,3 +78,64 @@ export function MobileSectionLabel({ label }: { label: string }) {
 		</p>
 	);
 }
+
+export function MobileFinanceEntityLinks({
+	type,
+	items,
+	onClick,
+}: {
+	type: keyof NavbarFinanceLinks;
+	items: NavbarEntityLink[];
+	onClick: () => void;
+}) {
+	const pathname = usePathname();
+
+	return items.map((item) => {
+		const href =
+			type === "cards"
+				? `/cards/${item.id}/invoice`
+				: `/accounts/${item.id}/statement`;
+		const logoSrc = resolveLogoSrc(item.logo);
+		const isActive = pathname === href;
+		const fallbackIcon =
+			type === "cards" ? (
+				<RiBankCard2Line className="size-3.5" />
+			) : (
+				<RiBankLine className="size-3.5" />
+			);
+
+		return (
+			<NavLink
+				key={href}
+				href={href}
+				preservePeriod
+				onClick={onClick}
+				className={cn(
+					"flex items-center gap-2 rounded-md py-1.5 pr-3 pl-9 text-xs transition-colors",
+					isActive
+						? "bg-primary/10 text-primary font-medium"
+						: "text-muted-foreground hover:bg-accent hover:text-foreground",
+				)}
+			>
+				{logoSrc ? (
+					<img
+						src={logoSrc}
+						alt=""
+						className="size-3.5 shrink-0 rounded-full object-contain"
+					/>
+				) : (
+					<span className="shrink-0">{fallbackIcon}</span>
+				)}
+				<span className="flex min-w-0 flex-col">
+					<span className={cn("truncate", type === "cards" && "font-semibold")}>
+						{item.name}
+					</span>
+					<span className="truncate text-xs text-muted-foreground">
+						{type === "cards" ? "Fatura deste mês" : "Saldo"}:{" "}
+						{formatCurrency(item.amount)}
+					</span>
+				</span>
+			</NavLink>
+		);
+	});
+}

src/shared/components/navigation/navbar/nav-dropdown.tsx

@@ -1,16 +1,85 @@
 "use client";
 
+import {
+	RiArrowRightSLine,
+	RiBankCard2Line,
+	RiBankLine,
+} from "@remixicon/react";
 import { usePathname } from "next/navigation";
 import { Badge } from "@/shared/components/ui/badge";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import { formatCurrency } from "@/shared/utils/currency";
 import { cn } from "@/shared/utils/ui";
-import type { NavItem } from "./nav-items";
+import type {
+	NavbarEntityLink,
+	NavbarFinanceLinks,
+	NavItem,
+} from "./nav-items";
 import { NavLink } from "./nav-link";
 
 type NavDropdownProps = {
 	items: NavItem[];
+	financeLinks?: NavbarFinanceLinks;
 };
 
-export function NavDropdown({ items }: NavDropdownProps) {
+function FinanceEntityLinks({
+	type,
+	items,
+}: {
+	type: keyof NavbarFinanceLinks;
+	items: NavbarEntityLink[];
+}) {
+	const pathname = usePathname();
+
+	return items.map((item) => {
+		const href =
+			type === "cards"
+				? `/cards/${item.id}/invoice`
+				: `/accounts/${item.id}/statement`;
+		const logoSrc = resolveLogoSrc(item.logo);
+		const isActive = pathname === href;
+		const fallbackIcon =
+			type === "cards" ? (
+				<RiBankCard2Line className="size-5" />
+			) : (
+				<RiBankLine className="size-5" />
+			);
+
+		return (
+			<li key={href}>
+				<NavLink
+					href={href}
+					preservePeriod
+					className={cn(
+						"flex items-center gap-2 rounded-sm px-2 py-2 text-sm transition-colors",
+						isActive
+							? "bg-accent text-primary"
+							: "text-foreground hover:bg-accent hover:text-foreground",
+					)}
+				>
+					{logoSrc ? (
+						<img
+							src={logoSrc}
+							alt=""
+							className="size-5 shrink-0 rounded-full object-contain"
+						/>
+					) : (
+						<span className="shrink-0">{fallbackIcon}</span>
+					)}
+					<span className="flex min-w-0 flex-col">
+						<span className={cn("truncate font-semibold")}>{item.name}</span>
+						<span className="truncate text-xs text-muted-foreground">
+							{type === "cards" ? "Fatura deste mês" : "Saldo"}:{" "}
+							{formatCurrency(item.amount)}
+						</span>
+					</span>
+				</NavLink>
+			</li>
+		);
+	});
+}
+
+export function NavDropdown({ items, financeLinks }: NavDropdownProps) {
 	const pathname = usePathname();
 
 	return (
@@ -18,9 +87,22 @@ export function NavDropdown({ items }: NavDropdownProps) {
 			{items.map((item) => {
 				const isActive =
 					pathname === item.href || pathname.startsWith(`${item.href}/`);
+				const entityLinks =
+					item.href === "/cards"
+						? financeLinks?.cards
+						: item.href === "/accounts"
+							? financeLinks?.accounts
+							: undefined;
+				const entityType =
+					item.href === "/cards"
+						? "cards"
+						: item.href === "/accounts"
+							? "accounts"
+							: undefined;
+				const hasEntityLinks = Boolean(entityType && entityLinks?.length);
 
 				return (
-					<li key={item.href}>
+					<li key={item.href} className="group/entity relative">
 						<NavLink
 							href={item.href}
 							preservePeriod={item.preservePeriod}
@@ -57,7 +139,20 @@ export function NavDropdown({ items }: NavDropdownProps) {
 									{item.badge}
 								</Badge>
 							) : null}
+							{hasEntityLinks ? (
+								<RiArrowRightSLine
+									className="ml-auto size-4 shrink-0 text-muted-foreground transition-transform group-hover/entity:translate-x-0.5"
+									aria-hidden
+								/>
+							) : null}
 						</NavLink>
+						{hasEntityLinks && entityType && entityLinks ? (
+							<div className="invisible absolute top-0 left-full z-50 pl-1 opacity-0 transition-opacity group-hover/entity:visible group-hover/entity:opacity-100 group-focus-within/entity:visible group-focus-within/entity:opacity-100">
+								<ul className="grid max-h-[calc(100vh-5rem)] w-64 gap-0.5 overflow-y-auto rounded-md border bg-popover p-2 text-popover-foreground">
+									<FinanceEntityLinks type={entityType} items={entityLinks} />
+								</ul>
+							</div>
+						) : null}
 					</li>
 				);
 			})}

src/shared/components/navigation/navbar/nav-items.tsx

@@ -26,6 +26,18 @@ export type NavItem = {
 	hideOnMobile?: boolean;
 };
 
+export type NavbarEntityLink = {
+	id: string;
+	name: string;
+	logo: string | null;
+	amount: number;
+};
+
+export type NavbarFinanceLinks = {
+	cards: NavbarEntityLink[];
+	accounts: NavbarEntityLink[];
+};
+
 type NavSection = {
 	label: string;
 	items: NavItem[];

src/shared/components/navigation/navbar/nav-menu.tsx

@@ -22,9 +22,13 @@ import {
 	SheetTrigger,
 } from "@/shared/components/ui/sheet";
 import { cn } from "@/shared/utils/ui";
-import { MobileLink, MobileSectionLabel } from "./mobile-link";
+import {
+	MobileFinanceEntityLinks,
+	MobileLink,
+	MobileSectionLabel,
+} from "./mobile-link";
 import { NavDropdown } from "./nav-dropdown";
-import { NAV_SECTIONS } from "./nav-items";
+import { NAV_SECTIONS, type NavbarFinanceLinks } from "./nav-items";
 import { NavPill } from "./nav-pill";
 import { MobileTools, NavToolsDropdown } from "./nav-tools";
 
@@ -34,7 +38,11 @@ const triggerClass =
 const triggerActiveClass =
 	"bg-primary-foreground/15! text-primary-foreground! dark:bg-foreground/15! dark:text-foreground!";
 
-export function NavMenu() {
+export function NavMenu({
+	financeLinks,
+}: {
+	financeLinks: NavbarFinanceLinks;
+}) {
 	const pathname = usePathname();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const [calculatorOpen, setCalculatorOpen] = useState(false);
@@ -73,8 +81,19 @@ export function NavMenu() {
 									>
 										{section.label}
 									</NavigationMenuTrigger>
-									<NavigationMenuContent>
+									<NavigationMenuContent
-										<NavDropdown items={section.items} />
+										className={
+											section.label === "Finanças"
+												? "overflow-visible!"
+												: undefined
+										}
+									>
+										<NavDropdown
+											items={section.items}
+											financeLinks={
+												section.label === "Finanças" ? financeLinks : undefined
+											}
+										/>
 									</NavigationMenuContent>
 								</NavigationMenuItem>
 							);
@@ -130,17 +149,33 @@ export function NavMenu() {
 								<div key={section.label}>
 									<MobileSectionLabel label={section.label} />
 									{mobileItems.map((item) => (
-										<MobileLink
+										<div key={item.href}>
-											key={item.href}
+											<MobileLink
-											href={item.href}
+												href={item.href}
-											icon={item.icon}
+												icon={item.icon}
-											onClick={close}
+												onClick={close}
-											badge={item.badge}
+												badge={item.badge}
-											preservePeriod={item.preservePeriod}
+												preservePeriod={item.preservePeriod}
-											description={item.description}
+												description={item.description}
-										>
+											>
-											{item.label}
+												{item.label}
-										</MobileLink>
+											</MobileLink>
+											{item.href === "/cards" && financeLinks.cards.length ? (
+												<MobileFinanceEntityLinks
+													type="cards"
+													items={financeLinks.cards}
+													onClick={close}
+												/>
+											) : null}
+											{item.href === "/accounts" &&
+											financeLinks.accounts.length ? (
+												<MobileFinanceEntityLinks
+													type="accounts"
+													items={financeLinks.accounts}
+													onClick={close}
+												/>
+											) : null}
+										</div>
 									))}
 								</div>
 							);