feat(navegacao): adiciona atalhos financeiros e seletor mensal

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>
-										<NavDropdown items={section.items} />
+									<NavigationMenuContent
+										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
-											key={item.href}
-											href={item.href}
-											icon={item.icon}
-											onClick={close}
-											badge={item.badge}
-											preservePeriod={item.preservePeriod}
-											description={item.description}
-										>
-											{item.label}
-										</MobileLink>
+										<div key={item.href}>
+											<MobileLink
+												href={item.href}
+												icon={item.icon}
+												onClick={close}
+												badge={item.badge}
+												preservePeriod={item.preservePeriod}
+												description={item.description}
+											>
+												{item.label}
+											</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>
 							);