refactor(core): move app para src e padroniza estrutura

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

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import type { DashboardNotificationsSnapshot } from "@/features/dashboard/notifications-queries";
+import { AnimatedThemeToggler } from "@/shared/components/animated-theme-toggler";
+import { Logo } from "@/shared/components/logo";
+import { NotificationBell } from "@/shared/components/navigation/navbar/notification-bell";
+import { RefreshPageButton } from "@/shared/components/refresh-page-button";
+import { NavMenu } from "./nav-menu";
+import { NavbarUser } from "./navbar-user";
+
+const navbarActionClassName =
+	"border-black/10 bg-transparent text-black/75 shadow-none hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-black/20 data-[state=open]:bg-black/10 data-[state=open]:text-black";
+
+type AppNavbarProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+	preLancamentosCount?: number;
+	notificationsSnapshot: DashboardNotificationsSnapshot;
+};
+
+export function AppNavbar({
+	user,
+	pagadorAvatarUrl,
+	preLancamentosCount = 0,
+	notificationsSnapshot,
+}: AppNavbarProps) {
+	return (
+		<header className="fixed top-0 left-0 right-0 z-50 flex h-16 shrink-0 items-center bg-primary">
+			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
+				{/* Logo */}
+				<Link href="/dashboard" className="shrink-0 mr-1">
+					<Logo variant="compact" invertTextOnDark={false} />
+				</Link>
+
+				{/* Navigation */}
+				<NavMenu />
+
+				{/* Right-side actions */}
+				<div className="ml-auto flex items-center gap-2">
+					<NotificationBell
+						notifications={notificationsSnapshot.notifications}
+						totalCount={notificationsSnapshot.totalCount}
+						budgetNotifications={notificationsSnapshot.budgetNotifications}
+						preLancamentosCount={preLancamentosCount}
+					/>
+					<RefreshPageButton className={navbarActionClassName} />
+					<AnimatedThemeToggler className={navbarActionClassName} />
+				</div>
+
+				{/* User avatar */}
+				<NavbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+			</div>
+		</header>
+	);
+}

src/shared/components/navigation/navbar/feedback-dialog.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import {
+	RiBugLine,
+	RiExternalLinkLine,
+	RiLightbulbLine,
+	RiMessageLine,
+	RiQuestionLine,
+	RiStarLine,
+} from "@remixicon/react";
+import {
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { cn } from "@/shared/utils";
+
+const GITHUB_REPO_BASE = "https://github.com/felipegcoutinho/openmonetis";
+const GITHUB_DISCUSSIONS_BASE = `${GITHUB_REPO_BASE}/discussions/new`;
+const GITHUB_ISSUES_URL = `${GITHUB_REPO_BASE}/issues/new`;
+
+const feedbackCategories = [
+	{
+		id: "bug",
+		title: "Reportar Bug",
+		icon: RiBugLine,
+		description: "Encontrou algo que não está funcionando?",
+		color: "text-destructive",
+		url: GITHUB_ISSUES_URL,
+	},
+	{
+		id: "idea",
+		title: "Sugerir Feature",
+		icon: RiLightbulbLine,
+		description: "Tem uma ideia para melhorar o app?",
+		color: "text-warning",
+		url: `${GITHUB_DISCUSSIONS_BASE}?category=ideias`,
+	},
+	{
+		id: "question",
+		title: "Dúvidas/Suporte",
+		icon: RiQuestionLine,
+		description: "Precisa de ajuda com alguma coisa?",
+		color: "text-info",
+		url: `${GITHUB_DISCUSSIONS_BASE}?category=q-a`,
+	},
+	{
+		id: "experience",
+		title: "Compartilhar Experiência",
+		icon: RiStarLine,
+		description: "Como o OpenMonetis tem ajudado você?",
+		color: "text-purple-500 dark:text-purple-400",
+		url: `${GITHUB_DISCUSSIONS_BASE}?category=sua-experiencia`,
+	},
+];
+
+export function FeedbackDialogBody({ onClose }: { onClose?: () => void }) {
+	const handleCategoryClick = (url: string) => {
+		window.open(url, "_blank", "noopener,noreferrer");
+		onClose?.();
+	};
+
+	return (
+		<DialogContent className="sm:max-w-[500px]">
+			<DialogHeader>
+				<DialogTitle className="flex items-center gap-2">
+					<RiMessageLine className="h-5 w-5" />
+					Enviar Feedback
+				</DialogTitle>
+				<DialogDescription>
+					Sua opinião é muito importante! Escolha o tipo de feedback que deseja
+					compartilhar.
+				</DialogDescription>
+			</DialogHeader>
+
+			<div className="grid gap-3 py-4">
+				{feedbackCategories.map((item) => {
+					const Icon = item.icon;
+					return (
+						<button
+							key={item.id}
+							onClick={() => handleCategoryClick(item.url)}
+							className={cn(
+								"flex items-start gap-3 p-4 rounded-lg border transition-all",
+								"hover:border-primary hover:bg-accent/50",
+								"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+							)}
+						>
+							<div
+								className={cn(
+									"flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
+									"bg-muted",
+								)}
+							>
+								<Icon className={cn("h-5 w-5", item.color)} />
+							</div>
+							<div className="flex-1 text-left space-y-1">
+								<h3 className="font-semibold text-sm flex items-center gap-2">
+									{item.title}
+									<RiExternalLinkLine className="h-3.5 w-3.5 text-muted-foreground" />
+								</h3>
+								<p className="text-sm text-muted-foreground">
+									{item.description}
+								</p>
+							</div>
+						</button>
+					);
+				})}
+			</div>
+
+			<div className="flex items-start gap-2 p-3 bg-muted/50 rounded-lg text-xs text-muted-foreground">
+				<RiExternalLinkLine className="h-4 w-4 shrink-0 mt-0.5" />
+				<p>
+					Você será redirecionado para o GitHub Discussions onde poderá escrever
+					seu feedback. É necessário ter uma conta no GitHub.
+				</p>
+			</div>
+		</DialogContent>
+	);
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Badge } from "@/shared/components/ui/badge";
+import { cn } from "@/shared/utils/ui";
+import { NavLink } from "./nav-link";
+
+type MobileLinkProps = {
+	href: string;
+	icon: React.ReactNode;
+	children: React.ReactNode;
+	onClick?: () => void;
+	badge?: number;
+	preservePeriod?: boolean;
+};
+
+export function MobileLink({
+	href,
+	icon,
+	children,
+	onClick,
+	badge,
+	preservePeriod,
+}: MobileLinkProps) {
+	const pathname = usePathname();
+
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<NavLink
+			href={href}
+			preservePeriod={preservePeriod}
+			onClick={onClick}
+			className={cn(
+				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+				"text-muted-foreground hover:text-foreground hover:bg-accent",
+				isActive && "bg-primary/10 text-primary font-medium",
+			)}
+		>
+			<span className="text-muted-foreground shrink-0">{icon}</span>
+			<span className="flex-1">{children}</span>
+			{badge && badge > 0 ? (
+				<Badge variant="secondary" className="text-xs px-1.5 py-0">
+					{badge}
+				</Badge>
+			) : null}
+		</NavLink>
+	);
+}
+
+export function MobileSectionLabel({ label }: { label: string }) {
+	return (
+		<p className="mt-3 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+			{label}
+		</p>
+	);
+}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { Badge } from "@/shared/components/ui/badge";
+import type { NavItem } from "./nav-items";
+import { NavLink } from "./nav-link";
+
+type NavDropdownProps = {
+	items: NavItem[];
+};
+
+export function NavDropdown({ items }: NavDropdownProps) {
+	return (
+		<ul className="grid w-48 gap-0.5 p-2">
+			{items.map((item) => (
+				<li key={item.href}>
+					<NavLink
+						href={item.href}
+						preservePeriod={item.preservePeriod}
+						className="flex items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
+					>
+						<span className="text-muted-foreground shrink-0">{item.icon}</span>
+						<span className="flex-1">{item.label}</span>
+						{item.badge && item.badge > 0 ? (
+							<Badge
+								variant="secondary"
+								className="text-xs px-1.5 py-0 h-4 min-w-4 ml-auto"
+							>
+								{item.badge}
+							</Badge>
+						) : null}
+					</NavLink>
+				</li>
+			))}
+		</ul>
+	);
+}

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

@@ -0,0 +1,127 @@
+import {
+	RiArrowLeftRightLine,
+	RiAtLine,
+	RiBankCard2Line,
+	RiBankLine,
+	RiBarChart2Line,
+	RiCalendarEventLine,
+	RiFileChartLine,
+	RiGroupLine,
+	RiPriceTag3Line,
+	RiSecurePaymentLine,
+	RiSparklingLine,
+	RiStore2Line,
+	RiTodoLine,
+} from "@remixicon/react";
+
+export type NavItem = {
+	href: string;
+	label: string;
+	icon: React.ReactNode;
+	badge?: number;
+	preservePeriod?: boolean;
+	hideOnMobile?: boolean;
+};
+
+export type NavSection = {
+	label: string;
+	items: NavItem[];
+};
+
+export const NAV_SECTIONS: NavSection[] = [
+	{
+		label: "Lançamentos",
+		items: [
+			{
+				href: "/transactions",
+				label: "lançamentos",
+				icon: <RiArrowLeftRightLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				href: "/inbox",
+				label: "pré-lançamentos",
+				icon: <RiAtLine className="size-4" />,
+			},
+			{
+				href: "/calendar",
+				label: "calendário",
+				icon: <RiCalendarEventLine className="size-4" />,
+				hideOnMobile: true,
+			},
+		],
+	},
+	{
+		label: "Finanças",
+		items: [
+			{
+				href: "/cards",
+				label: "cartões",
+				icon: <RiBankCard2Line className="size-4" />,
+			},
+			{
+				href: "/accounts",
+				label: "contas",
+				icon: <RiBankLine className="size-4" />,
+			},
+			{
+				href: "/budgets",
+				label: "orçamentos",
+				icon: <RiBarChart2Line className="size-4" />,
+				preservePeriod: true,
+			},
+		],
+	},
+	{
+		label: "Organização",
+		items: [
+			{
+				href: "/payers",
+				label: "pagadores",
+				icon: <RiGroupLine className="size-4" />,
+			},
+			{
+				href: "/categories",
+				label: "categorias",
+				icon: <RiPriceTag3Line className="size-4" />,
+			},
+			{
+				href: "/notes",
+				label: "anotações",
+				icon: <RiTodoLine className="size-4" />,
+			},
+		],
+	},
+	{
+		label: "Relatórios",
+		items: [
+			{
+				href: "/insights",
+				label: "insights",
+				icon: <RiSparklingLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				href: "/reports/category-trends",
+				label: "tendências",
+				icon: <RiFileChartLine className="size-4" />,
+			},
+			{
+				href: "/reports/card-usage",
+				label: "uso de cartões",
+				icon: <RiBankCard2Line className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				href: "/reports/installment-analysis",
+				label: "análise de parcelas",
+				icon: <RiSecurePaymentLine className="size-4" />,
+			},
+			{
+				href: "/reports/establishments",
+				label: "estabelecimentos",
+				icon: <RiStore2Line className="size-4" />,
+			},
+		],
+	},
+];

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

@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+
+const PERIOD_PARAM = "periodo";
+
+type NavLinkProps = Omit<React.ComponentProps<typeof Link>, "href"> & {
+	href: string;
+	preservePeriod?: boolean;
+};
+
+export function NavLink({
+	href,
+	preservePeriod = false,
+	...props
+}: NavLinkProps) {
+	const searchParams = useSearchParams();
+
+	let resolvedHref = href;
+	if (preservePeriod) {
+		const periodo = searchParams.get(PERIOD_PARAM);
+		if (periodo) {
+			const separator = href.includes("?") ? "&" : "?";
+			resolvedHref = `${href}${separator}${PERIOD_PARAM}=${encodeURIComponent(periodo)}`;
+		}
+	}
+
+	return <Link href={resolvedHref} {...props} />;
+}

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

@@ -0,0 +1,131 @@
+"use client";
+
+import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
+import { useState } from "react";
+import { CalculatorDialogContent } from "@/shared/components/calculator/calculator-dialog";
+import { Button } from "@/shared/components/ui/button";
+import { Dialog } from "@/shared/components/ui/dialog";
+import {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+} from "@/shared/components/ui/navigation-menu";
+import {
+	Sheet,
+	SheetContent,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "@/shared/components/ui/sheet";
+import { MobileLink, MobileSectionLabel } from "./mobile-link";
+import { NavDropdown } from "./nav-dropdown";
+import { NAV_SECTIONS } from "./nav-items";
+import { NavPill } from "./nav-pill";
+import { triggerClass } from "./nav-styles";
+import { MobileTools, NavToolsDropdown } from "./nav-tools";
+
+export function NavMenu() {
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const [calculatorOpen, setCalculatorOpen] = useState(false);
+	const close = () => setSheetOpen(false);
+	const openCalculator = () => setCalculatorOpen(true);
+
+	return (
+		<>
+			{/* Desktop */}
+			<nav className="hidden md:flex items-center justify-center flex-1 ">
+				<NavigationMenu viewport={false}>
+					<NavigationMenuList className="gap-0">
+						<NavigationMenuItem>
+							<NavPill href="/dashboard" preservePeriod>
+								Dashboard
+							</NavPill>
+						</NavigationMenuItem>
+
+						{NAV_SECTIONS.map((section) => (
+							<NavigationMenuItem key={section.label}>
+								<NavigationMenuTrigger className={triggerClass}>
+									{section.label}
+								</NavigationMenuTrigger>
+								<NavigationMenuContent>
+									<NavDropdown items={section.items} />
+								</NavigationMenuContent>
+							</NavigationMenuItem>
+						))}
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Ferramentas
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<NavToolsDropdown onOpenCalculator={openCalculator} />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+					</NavigationMenuList>
+				</NavigationMenu>
+			</nav>
+
+			{/* Mobile - order-[-1] places hamburger before logo visually */}
+			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+				<SheetTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="-order-1 border border-black/10 text-black/75 shadow-none md:hidden hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-black/20"
+					>
+						<RiMenuLine className="size-5" />
+						<span className="sr-only">Abrir menu</span>
+					</Button>
+				</SheetTrigger>
+				<SheetContent side="left" className="w-72 p-0 shadow-none">
+					<SheetHeader className="border-b border-border/60 p-4">
+						<SheetTitle>Menu</SheetTitle>
+					</SheetHeader>
+					<nav className="p-3 overflow-y-auto">
+						<MobileLink
+							href="/dashboard"
+							icon={<RiDashboardLine className="size-4" />}
+							onClick={close}
+							preservePeriod
+						>
+							dashboard
+						</MobileLink>
+
+						{NAV_SECTIONS.map((section) => {
+							const mobileItems = section.items.filter(
+								(item) => !item.hideOnMobile,
+							);
+							if (mobileItems.length === 0) return null;
+							return (
+								<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}
+										>
+											{item.label}
+										</MobileLink>
+									))}
+								</div>
+							);
+						})}
+
+						<MobileSectionLabel label="Ferramentas" />
+						<MobileTools onClose={close} onOpenCalculator={openCalculator} />
+					</nav>
+				</SheetContent>
+			</Sheet>
+
+			<Dialog open={calculatorOpen} onOpenChange={setCalculatorOpen}>
+				<CalculatorDialogContent open={calculatorOpen} />
+			</Dialog>
+		</>
+	);
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { cn } from "@/shared/utils/ui";
+import { NavLink } from "./nav-link";
+import { linkActive, linkBase, linkIdle } from "./nav-styles";
+
+type NavPillProps = {
+	href: string;
+	preservePeriod?: boolean;
+	children: React.ReactNode;
+};
+
+export function NavPill({ href, preservePeriod, children }: NavPillProps) {
+	const pathname = usePathname();
+
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<NavLink
+			href={href}
+			preservePeriod={preservePeriod}
+			className={cn(linkBase, isActive ? linkActive : linkIdle)}
+		>
+			{children}
+		</NavLink>
+	);
+}

src/shared/components/navigation/navbar/nav-styles.ts

@@ -0,0 +1,31 @@
+// Base para links diretos e triggers — pill arredondado
+export const linkBase =
+	"inline-flex h-8 items-center justify-center rounded-full px-3 text-sm font-medium transition-all lowercase";
+
+// Estado inativo: muted, hover suave sem underline
+export const linkIdle = "text-black/75 hover:bg-black/10 hover:text-black";
+
+// Estado ativo: pill com cor primária
+export const linkActive = "bg-black/10 text-black";
+
+// Trigger do NavigationMenu — espelha linkBase + linkIdle, remove estilos padrão
+export const triggerClass = [
+	"h-8!",
+	"rounded-full!",
+	"px-3!",
+	"py-0!",
+	"text-sm!",
+	"font-medium!",
+	"bg-transparent!",
+	"text-black/75!",
+	"hover:text-black!",
+	"hover:bg-black/10!",
+	"focus:text-black!",
+	"focus:bg-black/10!",
+	"focus-visible:ring-black/20!",
+	"data-[state=open]:text-black!",
+	"data-[state=open]:bg-black/10!",
+	"shadow-none!",
+	"[&_svg]:text-current!",
+	"lowercase!",
+].join(" ");

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { RiCalculatorLine, RiEyeLine, RiEyeOffLine } from "@remixicon/react";
+import { usePrivacyMode } from "@/shared/components/providers/privacy-provider";
+import { Badge } from "@/shared/components/ui/badge";
+import { cn } from "@/shared/utils/ui";
+
+const itemClass =
+	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
+
+type NavToolsDropdownProps = {
+	onOpenCalculator: () => void;
+};
+
+export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
+	const { privacyMode, toggle } = usePrivacyMode();
+
+	return (
+		<ul className="grid w-52 gap-0.5 p-2">
+			<li>
+				<button
+					type="button"
+					className={cn(itemClass)}
+					onClick={onOpenCalculator}
+				>
+					<span className="text-muted-foreground shrink-0">
+						<RiCalculatorLine className="size-4" />
+					</span>
+					<span className="flex-1 text-left">calculadora</span>
+				</button>
+			</li>
+			<li>
+				<button type="button" onClick={toggle} className={cn(itemClass)}>
+					<span className="text-muted-foreground shrink-0">
+						{privacyMode ? (
+							<RiEyeOffLine className="size-4" />
+						) : (
+							<RiEyeLine className="size-4" />
+						)}
+					</span>
+					<span className="flex-1 text-left">privacidade</span>
+					{privacyMode && (
+						<Badge
+							variant="secondary"
+							className="text-[10px] px-1.5 py-0 h-4 text-success"
+						>
+							Ativo
+						</Badge>
+					)}
+				</button>
+			</li>
+		</ul>
+	);
+}
+
+type MobileToolsProps = {
+	onClose: () => void;
+	onOpenCalculator: () => void;
+};
+
+export function MobileTools({ onClose, onOpenCalculator }: MobileToolsProps) {
+	const { privacyMode, toggle } = usePrivacyMode();
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					onClose();
+					onOpenCalculator();
+				}}
+				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+			>
+				<span className="text-muted-foreground shrink-0">
+					<RiCalculatorLine className="size-4" />
+				</span>
+				<span className="flex-1 text-left">calculadora</span>
+			</button>
+			<button
+				type="button"
+				onClick={() => {
+					toggle();
+					onClose();
+				}}
+				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+			>
+				<span className="text-muted-foreground shrink-0">
+					{privacyMode ? (
+						<RiEyeOffLine className="size-4" />
+					) : (
+						<RiEyeLine className="size-4" />
+					)}
+				</span>
+				<span className="flex-1 text-left">privacidade</span>
+				{privacyMode && (
+					<Badge
+						variant="secondary"
+						className="text-[10px] px-1.5 py-0 h-4 text-success"
+					>
+						Ativo
+					</Badge>
+				)}
+			</button>
+		</>
+	);
+}

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

@@ -0,0 +1,153 @@
+"use client";
+
+import {
+	RiHistoryLine,
+	RiLogoutCircleLine,
+	RiMessageLine,
+	RiSettings2Line,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { version } from "@/package.json";
+import { FeedbackDialogBody } from "@/shared/components/navigation/navbar/feedback-dialog";
+import { Badge } from "@/shared/components/ui/badge";
+import { Dialog, DialogTrigger } from "@/shared/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu";
+import { Spinner } from "@/shared/components/ui/spinner";
+import { authClient } from "@/shared/lib/auth/client";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import { cn } from "@/shared/utils/ui";
+
+const itemClass =
+	"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent";
+
+type NavbarUserProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+};
+
+export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
+	const router = useRouter();
+	const [logoutLoading, setLogoutLoading] = useState(false);
+	const [feedbackOpen, setFeedbackOpen] = useState(false);
+
+	const avatarSrc = pagadorAvatarUrl
+		? getAvatarSrc(pagadorAvatarUrl)
+		: user.image || getAvatarSrc(null);
+
+	async function handleLogout() {
+		await authClient.signOut({
+			fetchOptions: {
+				onSuccess: () => router.push("/login"),
+				onRequest: () => setLogoutLoading(true),
+				onResponse: () => setLogoutLoading(false),
+			},
+		});
+	}
+
+	return (
+		<Dialog open={feedbackOpen} onOpenChange={setFeedbackOpen}>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<button
+						className="relative flex size-9 items-center justify-center overflow-hidden rounded-full shadow-none transition-colors focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:outline-none"
+						aria-label="Menu do usuário"
+					>
+						<Image
+							src={avatarSrc}
+							alt={`Avatar de ${user.name}`}
+							width={40}
+							height={40}
+							className="size-10 rounded-full object-cover"
+						/>
+					</button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent
+					align="end"
+					className="w-60 border-border/60 p-2 shadow-none"
+					sideOffset={10}
+				>
+					<DropdownMenuLabel className="flex items-center gap-3 px-2 py-2">
+						<Image
+							src={avatarSrc}
+							alt={user.name}
+							width={36}
+							height={36}
+							className="size-9 rounded-full object-cover shrink-0"
+						/>
+						<div className="flex flex-col min-w-0">
+							<span className="text-sm font-medium truncate">{user.name}</span>
+							<span className="text-xs text-muted-foreground truncate">
+								{user.email}
+							</span>
+						</div>
+					</DropdownMenuLabel>
+
+					<DropdownMenuSeparator />
+
+					<div className="flex flex-col gap-0.5 py-1">
+						<Link href="/settings" className={cn(itemClass, "text-foreground")}>
+							<RiSettings2Line className="size-4 text-muted-foreground shrink-0" />
+							Ajustes
+						</Link>
+
+						<Link
+							href="/settings/changelog"
+							className={cn(itemClass, "text-foreground")}
+						>
+							<RiHistoryLine className="size-4 text-muted-foreground shrink-0" />
+							<span className="flex-1">Changelog</span>
+							<Badge variant="secondary">v{version}</Badge>
+						</Link>
+
+						<DialogTrigger asChild>
+							<button
+								type="button"
+								className={cn(itemClass, "text-foreground")}
+							>
+								<RiMessageLine className="size-4 text-muted-foreground shrink-0" />
+								Enviar Feedback
+							</button>
+						</DialogTrigger>
+					</div>
+
+					<DropdownMenuSeparator />
+
+					<div className="py-1">
+						<button
+							type="button"
+							onClick={handleLogout}
+							disabled={logoutLoading}
+							aria-busy={logoutLoading}
+							className={cn(
+								itemClass,
+								"text-destructive hover:bg-destructive/10 hover:text-destructive disabled:opacity-60",
+							)}
+						>
+							{logoutLoading ? (
+								<Spinner className="size-4 shrink-0" />
+							) : (
+								<RiLogoutCircleLine className="size-4 shrink-0" />
+							)}
+							{logoutLoading ? "Saindo..." : "Sair"}
+						</button>
+					</div>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<FeedbackDialogBody onClose={() => setFeedbackOpen(false)} />
+		</Dialog>
+	);
+}

src/shared/components/navigation/navbar/notification-bell.tsx

@@ -0,0 +1,359 @@
+"use client";
+
+import {
+	RiAlertFill,
+	RiArrowRightLine,
+	RiAtLine,
+	RiBankCardLine,
+	RiBarChart2Line,
+	RiCheckboxCircleFill,
+	RiErrorWarningLine,
+	RiFileListLine,
+	RiNotification3Line,
+	RiTimeLine,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import type {
+	BudgetNotification,
+	DashboardNotification,
+} from "@/features/dashboard/notifications-queries";
+import { Badge } from "@/shared/components/ui/badge";
+import { buttonVariants } from "@/shared/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/shared/components/ui/empty";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import { formatCurrency } from "@/shared/utils/currency";
+import { formatDateOnly } from "@/shared/utils/date";
+import { formatPercentage } from "@/shared/utils/percentage";
+import { cn } from "@/shared/utils/ui";
+
+type NotificationBellProps = {
+	notifications: DashboardNotification[];
+	totalCount: number;
+	budgetNotifications: BudgetNotification[];
+	preLancamentosCount?: number;
+};
+
+function formatDate(dateString: string): string {
+	return (
+		formatDateOnly(dateString, {
+			day: "2-digit",
+			month: "short",
+		}) ?? dateString
+	);
+}
+
+function SectionLabel({
+	icon,
+	title,
+}: {
+	icon: React.ReactNode;
+	title: string;
+}) {
+	return (
+		<div className="flex items-center gap-1.5 px-3 pb-1 pt-3">
+			<span className="text-muted-foreground">{icon}</span>
+			<span className="text-xs text-muted-foreground">{title}</span>
+		</div>
+	);
+}
+
+export function NotificationBell({
+	notifications,
+	totalCount,
+	budgetNotifications,
+	preLancamentosCount = 0,
+}: NotificationBellProps) {
+	const [open, setOpen] = useState(false);
+
+	const effectiveTotalCount =
+		totalCount + preLancamentosCount + budgetNotifications.length;
+	const displayCount =
+		effectiveTotalCount > 99 ? "99+" : effectiveTotalCount.toString();
+	const hasNotifications = effectiveTotalCount > 0;
+
+	const invoiceNotifications = notifications.filter(
+		(n) => n.type === "invoice",
+	);
+	const boletoNotifications = notifications.filter((n) => n.type === "boleto");
+
+	return (
+		<DropdownMenu open={open} onOpenChange={setOpen}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<DropdownMenuTrigger asChild>
+						<button
+							type="button"
+							aria-label="Notificações"
+							aria-expanded={open}
+							className={cn(
+								buttonVariants({ variant: "ghost", size: "icon-sm" }),
+								"group relative border border-black/10 text-black/75 shadow-none transition-all duration-200",
+								"hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-2 focus-visible:ring-black/20",
+								"data-[state=open]:bg-black/10 data-[state=open]:text-black",
+							)}
+						>
+							<RiNotification3Line
+								className={cn(
+									"size-4 transition-transform duration-200",
+									open ? "scale-90" : "scale-100",
+								)}
+							/>
+							{hasNotifications && (
+								<>
+									<span
+										aria-hidden
+										className="absolute -right-1.5 -top-1.5 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground "
+									>
+										{displayCount}
+									</span>
+									<span className="absolute -right-1.5 -top-1.5 size-5 animate-ping rounded-full bg-destructive/40" />
+								</>
+							)}
+						</button>
+					</DropdownMenuTrigger>
+				</TooltipTrigger>
+				<TooltipContent side="bottom" sideOffset={8}>
+					Notificações
+				</TooltipContent>
+			</Tooltip>
+
+			<DropdownMenuContent
+				align="end"
+				sideOffset={12}
+				className="w-76 overflow-hidden rounded-lg border border-border/60 bg-popover p-0 shadow-none"
+			>
+				{/* Header */}
+				<DropdownMenuLabel className="flex items-center justify-between gap-2 border-b border-border/50 px-3 py-2.5 text-sm font-semibold">
+					<span>Notificações</span>
+					{hasNotifications && (
+						<Badge variant="outline" className="text-[10px] font-semibold">
+							{effectiveTotalCount}{" "}
+							{effectiveTotalCount === 1 ? "item" : "itens"}
+						</Badge>
+					)}
+				</DropdownMenuLabel>
+
+				{!hasNotifications ? (
+					<div className="px-4 py-8">
+						<Empty>
+							<EmptyMedia>
+								<RiCheckboxCircleFill color="green" />
+							</EmptyMedia>
+							<EmptyTitle>Nenhuma notificação</EmptyTitle>
+							<EmptyDescription>
+								Você está em dia com seus pagamentos!
+							</EmptyDescription>
+						</Empty>
+					</div>
+				) : (
+					<div className="max-h-[460px] overflow-y-auto pb-2">
+						{/* Pré-lançamentos */}
+						{preLancamentosCount > 0 && (
+							<div>
+								<SectionLabel
+									icon={<RiAtLine className="size-3" />}
+									title="Pré-lançamentos"
+								/>
+								<Link
+									href="/inbox"
+									onClick={() => setOpen(false)}
+									className="group mx-1 mb-1 flex items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-accent/60"
+								>
+									<RiAtLine className="size-6 shrink-0 text-primary" />
+									<p className="flex-1 text-xs leading-snug text-foreground">
+										{preLancamentosCount === 1
+											? "1 pré-lançamento aguardando revisão"
+											: `${preLancamentosCount} pré-lançamentos aguardando revisão`}
+									</p>
+									<RiArrowRightLine className="size-3 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" />
+								</Link>
+							</div>
+						)}
+
+						{/* Orçamentos */}
+						{budgetNotifications.length > 0 && (
+							<div>
+								<SectionLabel
+									icon={<RiBarChart2Line className="size-3" />}
+									title="Orçamentos"
+								/>
+								<div className="mx-1 mb-1 overflow-hidden rounded-md">
+									{budgetNotifications.map((n) => (
+										<div
+											key={n.id}
+											className="flex items-start gap-2 px-2 py-2"
+										>
+											{n.status === "exceeded" ? (
+												<RiAlertFill className="mt-0.5 size-6 shrink-0 text-destructive" />
+											) : (
+												<RiErrorWarningLine className="mt-0.5 size-6 shrink-0 text-amber-500" />
+											)}
+											<p className="text-xs leading-snug">
+												{n.status === "exceeded" ? (
+													<>
+														Orçamento de <strong>{n.categoryName}</strong>{" "}
+														excedido —{" "}
+														<strong>{formatCurrency(n.spentAmount)}</strong> de{" "}
+														{formatCurrency(n.budgetAmount)} (
+														{formatPercentage(n.usedPercentage, {
+															maximumFractionDigits: 0,
+															minimumFractionDigits: 0,
+														})}
+														)
+													</>
+												) : (
+													<>
+														<strong>{n.categoryName}</strong> atingiu{" "}
+														<strong>
+															{formatPercentage(n.usedPercentage, {
+																maximumFractionDigits: 0,
+																minimumFractionDigits: 0,
+															})}
+														</strong>{" "}
+														do orçamento —{" "}
+														<strong>{formatCurrency(n.spentAmount)}</strong> de{" "}
+														{formatCurrency(n.budgetAmount)}
+													</>
+												)}
+											</p>
+										</div>
+									))}
+								</div>
+							</div>
+						)}
+
+						{/* Cartão de Crédito */}
+						{invoiceNotifications.length > 0 && (
+							<div>
+								<SectionLabel
+									icon={<RiBankCardLine className="size-3" />}
+									title="Cartão de Crédito"
+								/>
+								<div className="mx-1 mb-1 overflow-hidden rounded-md">
+									{invoiceNotifications.map((n) => {
+										const logo = resolveLogoSrc(n.cardLogo);
+										return (
+											<div
+												key={n.id}
+												className="flex items-start gap-2 px-2 py-2"
+											>
+												{logo ? (
+													<Image
+														src={logo}
+														alt=""
+														width={24}
+														height={24}
+														className="mt-0.5 size-6 shrink-0 rounded-sm object-contain"
+													/>
+												) : n.status === "overdue" ? (
+													<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+												) : (
+													<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
+												)}
+												<p className="text-xs leading-snug">
+													{n.status === "overdue" ? (
+														<>
+															A fatura de <strong>{n.name}</strong> venceu em{" "}
+															{formatDate(n.dueDate)}
+															{n.showAmount && n.amount > 0 && (
+																<>
+																	{" "}
+																	— <strong>{formatCurrency(n.amount)}</strong>
+																</>
+															)}
+														</>
+													) : (
+														<>
+															A fatura de <strong>{n.name}</strong> vence em{" "}
+															{formatDate(n.dueDate)}
+															{n.showAmount && n.amount > 0 && (
+																<>
+																	{" "}
+																	— <strong>{formatCurrency(n.amount)}</strong>
+																</>
+															)}
+														</>
+													)}
+												</p>
+											</div>
+										);
+									})}
+								</div>
+							</div>
+						)}
+
+						{/* Boletos */}
+						{boletoNotifications.length > 0 && (
+							<div>
+								<SectionLabel
+									icon={<RiFileListLine className="size-3" />}
+									title="Boletos"
+								/>
+								<div className="mx-1 mb-1 overflow-hidden rounded-md">
+									{boletoNotifications.map((n) => (
+										<div
+											key={n.id}
+											className="flex items-start gap-2 px-2 py-2"
+										>
+											<RiAlertFill
+												className={cn(
+													"mt-0.5 size-6 shrink-0",
+													n.status === "overdue"
+														? "text-destructive"
+														: "text-amber-500",
+												)}
+											/>
+											<p className="text-xs leading-snug">
+												{n.status === "overdue" ? (
+													<>
+														O boleto <strong>{n.name}</strong>
+														{n.amount > 0 && (
+															<>
+																{" "}
+																— <strong>{formatCurrency(n.amount)}</strong>
+															</>
+														)}{" "}
+														venceu em {formatDate(n.dueDate)}
+													</>
+												) : (
+													<>
+														O boleto <strong>{n.name}</strong>
+														{n.amount > 0 && (
+															<>
+																{" "}
+																— <strong>{formatCurrency(n.amount)}</strong>
+															</>
+														)}{" "}
+														vence em {formatDate(n.dueDate)}
+													</>
+												)}
+											</p>
+										</div>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

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

@@ -0,0 +1,83 @@
+"use client";
+import * as React from "react";
+import { Logo } from "@/shared/components/logo";
+import { NavMain } from "@/shared/components/navigation/sidebar/nav-main";
+import { NavSecondary } from "@/shared/components/navigation/sidebar/nav-secondary";
+import { NavUser } from "@/shared/components/navigation/sidebar/nav-user";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/shared/components/ui/sidebar";
+import { createSidebarNavData, type PagadorLike } from "./nav-link";
+
+type AppUser = {
+	id: string;
+	name: string;
+	email: string;
+	image: string | null;
+};
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+	user: AppUser;
+	pagadorAvatarUrl: string | null;
+	pagadores: PagadorLike[];
+	preLancamentosCount?: number;
+}
+
+export function AppSidebar({
+	user,
+	pagadorAvatarUrl,
+	pagadores,
+	preLancamentosCount = 0,
+	...props
+}: AppSidebarProps) {
+	if (!user) {
+		throw new Error("AppSidebar requires a user but received undefined.");
+	}
+
+	const navigation = React.useMemo(
+		() => createSidebarNavData({ pagadores, preLancamentosCount }),
+		[pagadores, preLancamentosCount],
+	);
+
+	return (
+		<Sidebar collapsible="icon" {...props}>
+			<SidebarHeader>
+				<SidebarMenu>
+					<SidebarMenuItem>
+						<SidebarMenuButton
+							asChild
+							className="data-[slot=sidebar-menu-button]:px-1.5! hover:bg-transparent active:bg-transparent pt-8 py-6 justify-center hover:scale-120 scale-110 transition-all duration-200"
+						>
+							<a href="/dashboard">
+								<LogoContent />
+							</a>
+						</SidebarMenuButton>
+					</SidebarMenuItem>
+				</SidebarMenu>
+			</SidebarHeader>
+			<SidebarContent>
+				<NavMain sections={navigation.navMain} />
+				<NavSecondary items={navigation.navSecondary} className="mt-auto" />
+			</SidebarContent>
+			<SidebarFooter>
+				<NavUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+			</SidebarFooter>
+		</Sidebar>
+	);
+}
+
+function LogoContent() {
+	const { state } = useSidebar();
+	const isCollapsed = state === "collapsed";
+
+	return (
+		<Logo variant={isCollapsed ? "small" : "full"} showVersion={!isCollapsed} />
+	);
+}

src/shared/components/navigation/sidebar/nav-link.tsx

@@ -0,0 +1,185 @@
+import {
+	type RemixiconComponentType,
+	RiArrowLeftRightLine,
+	RiAtLine,
+	RiBankCard2Line,
+	RiBankLine,
+	RiCalendarEventLine,
+	RiDashboardLine,
+	RiFileChartLine,
+	RiFundsLine,
+	RiGroupLine,
+	RiPriceTag3Line,
+	RiSecurePaymentLine,
+	RiSettings2Line,
+	RiSparklingLine,
+	RiTodoLine,
+} from "@remixicon/react";
+
+export type SidebarSubItem = {
+	title: string;
+	url: string;
+	avatarUrl?: string | null;
+	isShared?: boolean;
+	key?: string;
+	icon?: RemixiconComponentType;
+	badge?: number;
+};
+
+export type SidebarItem = {
+	title: string;
+	url: string;
+	icon: RemixiconComponentType;
+	isActive?: boolean;
+	items?: SidebarSubItem[];
+};
+
+export type SidebarSection = {
+	title: string;
+	items: SidebarItem[];
+};
+
+export type SidebarNavData = {
+	navMain: SidebarSection[];
+	navSecondary: {
+		title: string;
+		url: string;
+		icon: RemixiconComponentType;
+	}[];
+};
+
+export interface PagadorLike {
+	id: string;
+	name: string | null;
+	avatarUrl: string | null;
+	canEdit?: boolean;
+}
+
+export interface SidebarNavOptions {
+	pagadores: PagadorLike[];
+	preLancamentosCount?: number;
+}
+
+export function createSidebarNavData(
+	options: SidebarNavOptions,
+): SidebarNavData {
+	const { pagadores, preLancamentosCount = 0 } = options;
+	const pagadorItems = pagadores
+		.map((pagador) => ({
+			title: pagador.name?.trim().length
+				? pagador.name.trim()
+				: "Pagador sem nome",
+			url: `/payers/${pagador.id}`,
+			key: pagador.canEdit ? pagador.id : `${pagador.id}-shared`,
+			isShared: !pagador.canEdit,
+			avatarUrl: pagador.avatarUrl,
+		}))
+		.sort((a, b) =>
+			a.title.localeCompare(b.title, "pt-BR", { sensitivity: "base" }),
+		);
+
+	const pagadorItemsWithHistory: SidebarSubItem[] = pagadorItems;
+
+	return {
+		navMain: [
+			{
+				title: "Gestão Financeira",
+				items: [
+					{
+						title: "Dashboard",
+						url: "/dashboard",
+						icon: RiDashboardLine,
+					},
+					{
+						title: "Lançamentos",
+						url: "/transactions",
+						icon: RiArrowLeftRightLine,
+						items: [
+							{
+								title: "Pré-Lançamentos",
+								url: "/inbox",
+								key: "pre-lancamentos",
+								icon: RiAtLine,
+								badge:
+									preLancamentosCount > 0 ? preLancamentosCount : undefined,
+							},
+						],
+					},
+					{
+						title: "Calendário",
+						url: "/calendar",
+						icon: RiCalendarEventLine,
+					},
+					{
+						title: "Cartões",
+						url: "/cards",
+						icon: RiBankCard2Line,
+					},
+					{
+						title: "Contas",
+						url: "/accounts",
+						icon: RiBankLine,
+					},
+					{
+						title: "Orçamentos",
+						url: "/budgets",
+						icon: RiFundsLine,
+					},
+				],
+			},
+			{
+				title: "Organização",
+				items: [
+					{
+						title: "Pagadores",
+						url: "/payers",
+						icon: RiGroupLine,
+						items: pagadorItemsWithHistory,
+					},
+					{
+						title: "Categorias",
+						url: "/categories",
+						icon: RiPriceTag3Line,
+					},
+					{
+						title: "Anotações",
+						url: "/notes",
+						icon: RiTodoLine,
+					},
+				],
+			},
+			{
+				title: "Análise",
+				items: [
+					{
+						title: "Insights",
+						url: "/insights",
+						icon: RiSparklingLine,
+					},
+					{
+						title: "Tendências",
+						url: "/reports/category-trends",
+						icon: RiFileChartLine,
+					},
+					{
+						title: "Uso de Cartões",
+						url: "/reports/card-usage",
+						icon: RiBankCard2Line,
+					},
+					{
+						title: "Análise de Parcelas",
+						url: "/reports/installment-analysis",
+						icon: RiSecurePaymentLine,
+					},
+				],
+			},
+		],
+		navSecondary: [
+			{
+				title: "Ajustes",
+				url: "/settings",
+				icon: RiSettings2Line,
+			},
+		],
+	};
+}

src/shared/components/navigation/sidebar/nav-main.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import {
+	type RemixiconComponentType,
+	RiArrowRightSLine,
+	RiUserSharedLine,
+} from "@remixicon/react";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@/shared/components/ui/avatar";
+import { Badge } from "@/shared/components/ui/badge";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/shared/components/ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+} from "@/shared/components/ui/sidebar";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+
+type NavItem = {
+	title: string;
+	url: string;
+	icon: RemixiconComponentType;
+	isActive?: boolean;
+	items?: {
+		title: string;
+		url: string;
+		avatarUrl?: string | null;
+		isShared?: boolean;
+		key?: string;
+		icon?: RemixiconComponentType;
+		badge?: number;
+	}[];
+};
+
+type NavSection = {
+	title: string;
+	items: NavItem[];
+};
+
+const MONTH_PERIOD_PARAM = "periodo";
+
+const PERIOD_AWARE_PATHS = new Set(["/dashboard", "/transactions", "/budgets"]);
+
+export function NavMain({ sections }: { sections: NavSection[] }) {
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const periodParam = searchParams.get(MONTH_PERIOD_PARAM);
+
+	const normalizedPathname =
+		pathname.endsWith("/") && pathname !== "/"
+			? pathname.slice(0, -1)
+			: pathname;
+
+	const isLinkActive = (url: string) => {
+		const normalizedUrl =
+			url.endsWith("/") && url !== "/" ? url.slice(0, -1) : url;
+
+		// Verifica se é exatamente igual ou se o pathname começa com a URL
+		return (
+			normalizedPathname === normalizedUrl ||
+			normalizedPathname.startsWith(`${normalizedUrl}/`)
+		);
+	};
+
+	const buildHrefWithPeriod = (url: string) => {
+		if (!periodParam) {
+			return url;
+		}
+
+		const [rawPathname, existingSearch = ""] = url.split("?");
+		const normalizedRawPathname =
+			rawPathname.endsWith("/") && rawPathname !== "/"
+				? rawPathname.slice(0, -1)
+				: rawPathname;
+
+		if (!PERIOD_AWARE_PATHS.has(normalizedRawPathname)) {
+			return url;
+		}
+
+		const params = new URLSearchParams(existingSearch);
+		params.set(MONTH_PERIOD_PARAM, periodParam);
+
+		const queryString = params.toString();
+		return queryString
+			? `${normalizedRawPathname}?${queryString}`
+			: normalizedRawPathname;
+	};
+
+	const activeLinkClasses =
+		"data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!";
+
+	return (
+		<>
+			{sections.map((section, index) => (
+				<SidebarGroup key={section.title}>
+					<SidebarGroupLabel className="text-xs text-muted-foreground/60">
+						{section.title}
+					</SidebarGroupLabel>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{section.items.map((item) => {
+								const itemIsActive = isLinkActive(item.url);
+								return (
+									<Collapsible key={item.title} asChild>
+										<SidebarMenuItem>
+											<SidebarMenuButton
+												asChild
+												tooltip={item.title}
+												isActive={itemIsActive}
+												className={itemIsActive ? activeLinkClasses : ""}
+											>
+												<Link prefetch href={buildHrefWithPeriod(item.url)}>
+													<item.icon className="size-4" />
+													{item.title}
+												</Link>
+											</SidebarMenuButton>
+											{item.items?.length ? (
+												<>
+													<CollapsibleTrigger asChild>
+														<SidebarMenuAction className="data-[state=open]:rotate-90 px-2 trasition-transform duration-200">
+															<RiArrowRightSLine className="text-primary" />
+															<span className="sr-only">Toggle</span>
+														</SidebarMenuAction>
+													</CollapsibleTrigger>
+													<CollapsibleContent>
+														<SidebarMenuSub>
+															{item.items?.map((subItem) => {
+																const subItemIsActive = isLinkActive(
+																	subItem.url,
+																);
+																const avatarSrc = getAvatarSrc(
+																	subItem.avatarUrl,
+																);
+																const initial =
+																	subItem.title.charAt(0).toUpperCase() || "?";
+																return (
+																	<SidebarMenuSubItem
+																		key={subItem.key ?? subItem.title}
+																	>
+																		<SidebarMenuSubButton
+																			asChild
+																			isActive={subItemIsActive}
+																			className={
+																				subItemIsActive ? activeLinkClasses : ""
+																			}
+																		>
+																			<Link
+																				prefetch
+																				href={buildHrefWithPeriod(subItem.url)}
+																				className="flex items-center gap-2"
+																			>
+																				{subItem.icon ? (
+																					<subItem.icon className="size-4" />
+																				) : subItem.avatarUrl !== undefined ? (
+																					<Avatar className="size-5 border border-border/60 bg-background">
+																						<AvatarImage
+																							src={avatarSrc}
+																							alt={`Avatar de ${subItem.title}`}
+																						/>
+																						<AvatarFallback className="text-xs font-medium uppercase">
+																							{initial}
+																						</AvatarFallback>
+																					</Avatar>
+																				) : null}
+																				<span>{subItem.title}</span>
+																				{subItem.badge ? (
+																					<Badge
+																						variant="destructive"
+																						className="ml-auto h-5 min-w-5 px-1.5 text-xs"
+																					>
+																						{subItem.badge}
+																					</Badge>
+																				) : null}
+																				{subItem.isShared ? (
+																					<RiUserSharedLine className="size-3.5 text-muted-foreground" />
+																				) : null}
+																			</Link>
+																		</SidebarMenuSubButton>
+																	</SidebarMenuSubItem>
+																);
+															})}
+														</SidebarMenuSub>
+													</CollapsibleContent>
+												</>
+											) : null}
+										</SidebarMenuItem>
+									</Collapsible>
+								);
+							})}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+			))}
+		</>
+	);
+}

src/shared/components/navigation/sidebar/nav-secondary.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { RemixiconComponentType } from "@remixicon/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type * as React from "react";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "@/shared/components/ui/sidebar";
+
+export function NavSecondary({
+	items,
+	...props
+}: {
+	items: {
+		title: string;
+		url: string;
+		icon: RemixiconComponentType;
+	}[];
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+	const pathname = usePathname();
+
+	return (
+		<SidebarGroup {...props}>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => {
+						const normalizedPathname =
+							pathname.endsWith("/") && pathname !== "/"
+								? pathname.slice(0, -1)
+								: pathname;
+						const normalizedUrl =
+							item.url.endsWith("/") && item.url !== "/"
+								? item.url.slice(0, -1)
+								: item.url;
+						const itemIsActive =
+							normalizedPathname === normalizedUrl ||
+							normalizedPathname.startsWith(`${normalizedUrl}/`);
+						return (
+							<SidebarMenuItem key={item.title}>
+								<SidebarMenuButton
+									asChild
+									isActive={itemIsActive}
+									className={
+										itemIsActive
+											? "data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!"
+											: ""
+									}
+								>
+									<Link prefetch href={item.url}>
+										<item.icon className={"h-4 w-4"} />
+										<span>{item.title}</span>
+									</Link>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						);
+					})}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

src/shared/components/navigation/sidebar/nav-user.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Image from "next/image";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "@/shared/components/ui/sidebar";
+import { getAvatarSrc } from "@/shared/lib/payers/utils";
+
+type NavUserProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+};
+
+export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
+	const avatarSrc = pagadorAvatarUrl
+		? getAvatarSrc(pagadorAvatarUrl)
+		: user.image || getAvatarSrc(null);
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<SidebarMenuButton
+					size="lg"
+					className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground "
+				>
+					<Image
+						src={avatarSrc}
+						alt={user.name}
+						width={32}
+						height={32}
+						className="size-8 shrink-0 rounded-full object-cover"
+					/>
+					<div className="grid flex-1 text-left text-sm leading-tight">
+						<span className="truncate font-medium">{user.name}</span>
+						<span className="text-muted-foreground truncate text-xs">
+							{user.email}
+						</span>
+					</div>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}