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

src/shared/components/animated-theme-toggler.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { RiMoonClearLine, RiSunLine } from "@remixicon/react";
+import { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { buttonVariants } from "@/shared/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/utils/ui";
+
+interface AnimatedThemeTogglerProps
+	extends React.ComponentPropsWithoutRef<"button"> {
+	duration?: number;
+}
+
+export const AnimatedThemeToggler = ({
+	className,
+	duration = 400,
+	...props
+}: AnimatedThemeTogglerProps) => {
+	const [isDark, setIsDark] = useState(false);
+	const buttonRef = useRef<HTMLButtonElement>(null);
+
+	useEffect(() => {
+		const updateTheme = () => {
+			setIsDark(document.documentElement.classList.contains("dark"));
+		};
+
+		updateTheme();
+
+		const observer = new MutationObserver(updateTheme);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+
+		return () => observer.disconnect();
+	}, []);
+
+	const toggleTheme = async () => {
+		if (!buttonRef.current) return;
+
+		await document.startViewTransition(() => {
+			flushSync(() => {
+				const newTheme = !isDark;
+				setIsDark(newTheme);
+				document.documentElement.classList.toggle("dark");
+				localStorage.setItem("theme", newTheme ? "dark" : "light");
+			});
+		}).ready;
+
+		const { top, left, width, height } =
+			buttonRef.current.getBoundingClientRect();
+		const x = left + width / 2;
+		const y = top + height / 2;
+		const maxRadius = Math.hypot(
+			Math.max(left, window.innerWidth - left),
+			Math.max(top, window.innerHeight - top),
+		);
+
+		document.documentElement.animate(
+			{
+				clipPath: [
+					`circle(0px at ${x}px ${y}px)`,
+					`circle(${maxRadius}px at ${x}px ${y}px)`,
+				],
+			},
+			{
+				duration,
+				easing: "ease-in-out",
+				pseudoElement: "::view-transition-new(root)",
+			},
+		);
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					ref={buttonRef}
+					type="button"
+					onClick={toggleTheme}
+					data-state={isDark ? "dark" : "light"}
+					className={cn(
+						buttonVariants({ variant: "ghost", size: "icon-sm" }),
+						"group relative text-muted-foreground transition-all duration-200",
+						"hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+						"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border",
+						className,
+					)}
+					{...props}
+				>
+					<span
+						aria-hidden
+						className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-200 data-[state=dark]:opacity-100"
+					>
+						<span className="absolute inset-0 bg-linear-to-br from-amber-500/5 via-transparent to-amber-500/15 dark:from-amber-500/10 dark:to-amber-500/30" />
+					</span>
+					{isDark ? (
+						<RiSunLine
+							className="size-4 transition-transform duration-200"
+							aria-hidden
+						/>
+					) : (
+						<RiMoonClearLine
+							className="size-4 transition-transform duration-200"
+							aria-hidden
+						/>
+					)}
+					<span className="sr-only">
+						{isDark ? "Ativar tema claro" : "Ativar tema escuro"}
+					</span>
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="bottom" sideOffset={8}>
+				{isDark ? "Tema claro" : "Tema escuro"}
+			</TooltipContent>
+		</Tooltip>
+	);
+};

src/shared/components/calculator/calculator-dialog.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { RiCalculatorFill, RiCalculatorLine } from "@remixicon/react";
+import * as React from "react";
+import Calculator from "@/shared/components/calculator/calculator";
+import { Button, buttonVariants } from "@/shared/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/shared/components/ui/dialog";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { useDraggableDialog } from "@/shared/lib/calculator/use-draggable-dialog";
+import { cn } from "@/shared/utils/ui";
+
+type Variant = React.ComponentProps<typeof Button>["variant"];
+type Size = React.ComponentProps<typeof Button>["size"];
+
+type CalculatorDialogButtonProps = {
+	variant?: Variant;
+	size?: Size;
+	className?: string;
+	children?: React.ReactNode;
+	withTooltip?: boolean;
+	onSelectValue?: (value: string) => void;
+};
+
+export function CalculatorDialogContent({
+	open,
+	onSelectValue,
+}: {
+	open: boolean;
+	onSelectValue?: (value: string) => void;
+}) {
+	const { dragHandleProps, contentRefCallback, resetPosition } =
+		useDraggableDialog();
+
+	React.useEffect(() => {
+		if (!open) {
+			resetPosition();
+		}
+	}, [open, resetPosition]);
+
+	return (
+		<DialogContent
+			ref={contentRefCallback}
+			className="p-5 sm:max-w-sm sm:p-6"
+			onEscapeKeyDown={(e) => e.preventDefault()}
+			onPointerDownOutside={(e) => e.preventDefault()}
+			onFocusOutside={(e) => e.preventDefault()}
+			onInteractOutside={(e) => e.preventDefault()}
+		>
+			<DialogHeader
+				className="cursor-grab select-none space-y-2 active:cursor-grabbing"
+				{...dragHandleProps}
+			>
+				<DialogTitle className="flex items-center gap-2 text-lg">
+					<RiCalculatorLine className="h-5 w-5" />
+					Calculadora
+				</DialogTitle>
+			</DialogHeader>
+			<Calculator isOpen={open} onSelectValue={onSelectValue} />
+		</DialogContent>
+	);
+}
+
+export function CalculatorDialogButton({
+	variant = "ghost",
+	size = "sm",
+	className,
+	children,
+	withTooltip = false,
+	onSelectValue,
+}: CalculatorDialogButtonProps) {
+	const [open, setOpen] = React.useState(false);
+
+	const handleSelectValue = onSelectValue
+		? (value: string) => {
+				onSelectValue(value);
+				setOpen(false);
+			}
+		: undefined;
+
+	if (withTooltip) {
+		return (
+			<Dialog open={open} onOpenChange={setOpen}>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<DialogTrigger asChild>
+							<button
+								type="button"
+								aria-label="Calculadora"
+								aria-expanded={open}
+								data-state={open ? "open" : "closed"}
+								className={cn(
+									buttonVariants({ variant: "ghost", size: "icon-sm" }),
+									"group relative text-muted-foreground transition-all duration-200",
+									"hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+									"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border",
+									className,
+								)}
+							>
+								<RiCalculatorLine
+									className={cn(
+										"size-4 transition-transform duration-200",
+										open ? "scale-90" : "scale-100",
+									)}
+								/>
+								<span className="sr-only">Calculadora</span>
+							</button>
+						</DialogTrigger>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" sideOffset={8}>
+						Calculadora
+					</TooltipContent>
+				</Tooltip>
+				<CalculatorDialogContent
+					open={open}
+					onSelectValue={handleSelectValue}
+				/>
+			</Dialog>
+		);
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant={variant} size={size} className={cn(className)}>
+					{children ?? (
+						<RiCalculatorFill className="h-4 w-4 text-muted-foreground" />
+					)}
+				</Button>
+			</DialogTrigger>
+			<CalculatorDialogContent open={open} onSelectValue={handleSelectValue} />
+		</Dialog>
+	);
+}

src/shared/components/calculator/calculator-display.tsx

@@ -0,0 +1,64 @@
+import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
+import { Button } from "@/shared/components/ui/button";
+import { cn } from "@/shared/utils/ui";
+
+export type CalculatorDisplayProps = {
+	history: string | null;
+	expression: string;
+	resultText: string | null;
+	copied: boolean;
+	onCopy: () => void;
+	isResultView: boolean;
+};
+
+export function CalculatorDisplay({
+	history,
+	expression,
+	resultText,
+	copied,
+	onCopy,
+	isResultView,
+}: CalculatorDisplayProps) {
+	return (
+		<div className="flex h-24 flex-col rounded-xl border bg-muted px-4 py-4 text-right">
+			<div className="min-h-5 truncate text-sm text-muted-foreground">
+				{history ?? (
+					<span
+						className="pointer-events-none opacity-0 select-none"
+						aria-hidden
+					>
+						0 + 0
+					</span>
+				)}
+			</div>
+			<div className="mt-auto flex items-end justify-end gap-2">
+				<div
+					className={cn(
+						"truncate text-right font-semibold tracking-tight tabular-nums leading-none transition-all",
+						isResultView ? "text-2xl" : "text-3xl",
+					)}
+				>
+					{expression}
+				</div>
+				{resultText && (
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						onClick={onCopy}
+						className="h-6 w-6 shrink-0 rounded-full p-0 text-muted-foreground hover:text-foreground"
+					>
+						{copied ? (
+							<RiCheckLine className="h-4 w-4" />
+						) : (
+							<RiFileCopyLine className="h-4 w-4" />
+						)}
+						<span className="sr-only">
+							{copied ? "Resultado copiado" : "Copiar resultado"}
+						</span>
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}

src/shared/components/calculator/calculator-keypad.tsx

@@ -0,0 +1,49 @@
+import { Button } from "@/shared/components/ui/button";
+import type { CalculatorButtonConfig } from "@/shared/lib/calculator/use-calculator-state";
+import type { Operator } from "@/shared/utils/calculator";
+import { cn } from "@/shared/utils/ui";
+
+type CalculatorKeypadProps = {
+	buttons: CalculatorButtonConfig[][];
+	activeOperator: Operator | null;
+};
+
+const LABEL_TO_OPERATOR: Record<string, Operator> = {
+	"÷": "divide",
+	"×": "multiply",
+	"-": "subtract",
+	"+": "add",
+};
+
+export function CalculatorKeypad({
+	buttons,
+	activeOperator,
+}: CalculatorKeypadProps) {
+	return (
+		<div className="grid grid-cols-4 gap-2">
+			{buttons.flat().map((btn, index) => {
+				const op = LABEL_TO_OPERATOR[btn.label];
+				const isActive = op != null && op === activeOperator;
+
+				return (
+					<Button
+						key={`${btn.label}-${index}`}
+						type="button"
+						variant={isActive ? "default" : (btn.variant ?? "outline")}
+						onClick={btn.onClick}
+						className={cn(
+							"h-12 text-base font-semibold",
+							btn.colSpan === 2 && "col-span-2",
+							btn.colSpan === 3 && "col-span-3",
+							isActive &&
+								"bg-primary text-primary-foreground hover:bg-primary/90 ring-2 ring-primary/30",
+							btn.className,
+						)}
+					>
+						{btn.label}
+					</Button>
+				);
+			})}
+		</div>
+	);
+}

src/shared/components/calculator/calculator.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { CalculatorKeypad } from "@/shared/components/calculator/calculator-keypad";
+import { Button } from "@/shared/components/ui/button";
+import { useCalculatorKeyboard } from "@/shared/lib/calculator/use-calculator-keyboard";
+import { useCalculatorState } from "@/shared/lib/calculator/use-calculator-state";
+import { CalculatorDisplay } from "./calculator-display";
+
+type CalculatorProps = {
+	isOpen?: boolean;
+	onSelectValue?: (value: string) => void;
+};
+
+export default function Calculator({
+	isOpen = true,
+	onSelectValue,
+}: CalculatorProps) {
+	const {
+		display,
+		operator,
+		expression,
+		history,
+		resultText,
+		copied,
+		buttons,
+		inputDigit,
+		inputDecimal,
+		setNextOperator,
+		evaluate,
+		deleteLastDigit,
+		reset,
+		applyPercent,
+		copyToClipboard,
+		pasteFromClipboard,
+	} = useCalculatorState();
+
+	useCalculatorKeyboard({
+		isOpen,
+		canCopy: Boolean(resultText),
+		onCopy: copyToClipboard,
+		onPaste: pasteFromClipboard,
+		inputDigit,
+		inputDecimal,
+		setNextOperator,
+		evaluate,
+		deleteLastDigit,
+		reset,
+		applyPercent,
+	});
+
+	const canUseValue = onSelectValue && display !== "Erro" && display !== "0";
+
+	const handleSelectValue = () => {
+		if (!onSelectValue) return;
+		const numericValue = Math.abs(Number(display)).toFixed(2);
+		onSelectValue(numericValue);
+	};
+
+	return (
+		<div className="space-y-4">
+			<CalculatorDisplay
+				history={history}
+				expression={expression}
+				resultText={resultText}
+				copied={copied}
+				onCopy={copyToClipboard}
+				isResultView={Boolean(history)}
+			/>
+			<CalculatorKeypad buttons={buttons} activeOperator={operator} />
+			{onSelectValue && (
+				<Button
+					type="button"
+					variant="default"
+					className="w-full"
+					disabled={!canUseValue}
+					onClick={handleSelectValue}
+				>
+					Usar valor
+				</Button>
+			)}
+		</div>
+	);
+}

src/shared/components/confirm-action-dialog.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+import { useState, useTransition } from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/shared/components/ui/alert-dialog";
+import { buttonVariants } from "@/shared/components/ui/button";
+
+interface ConfirmActionDialogProps {
+	trigger?: React.ReactNode;
+	title: string;
+	description?: string;
+	confirmLabel?: string;
+	cancelLabel?: string;
+	pendingLabel?: string;
+	confirmVariant?: VariantProps<typeof buttonVariants>["variant"];
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	onConfirm?: () => Promise<void> | void;
+	disabled?: boolean;
+	className?: string;
+}
+
+export function ConfirmActionDialog({
+	trigger,
+	title,
+	description,
+	confirmLabel = "Confirmar",
+	cancelLabel = "Cancelar",
+	pendingLabel,
+	confirmVariant = "default",
+	open,
+	onOpenChange,
+	onConfirm,
+	disabled = false,
+	className,
+}: ConfirmActionDialogProps) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const [isPending, startTransition] = useTransition();
+	const dialogOpen = open ?? internalOpen;
+
+	const setDialogOpen = (value: boolean) => {
+		if (open === undefined) {
+			setInternalOpen(value);
+		}
+		onOpenChange?.(value);
+	};
+
+	const resolvedPendingLabel = pendingLabel ?? confirmLabel;
+
+	const handleConfirm = () => {
+		if (!onConfirm) {
+			setDialogOpen(false);
+			return;
+		}
+
+		startTransition(async () => {
+			try {
+				await onConfirm();
+				setDialogOpen(false);
+			} catch {
+				// Mantém o diálogo aberto para que o chamador trate o erro.
+			}
+		});
+	};
+
+	return (
+		<AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+			{trigger ? (
+				<AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+			) : null}
+			<AlertDialogContent className={className}>
+				<AlertDialogHeader>
+					<AlertDialogTitle>{title}</AlertDialogTitle>
+					{description ? (
+						<AlertDialogDescription>{description}</AlertDialogDescription>
+					) : null}
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel disabled={isPending || disabled}>
+						{cancelLabel}
+					</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={handleConfirm}
+						disabled={isPending || disabled}
+						className={buttonVariants({ variant: confirmVariant })}
+					>
+						{isPending ? resolvedPendingLabel : confirmLabel}
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+}

src/shared/components/empty-state.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/shared/components/ui/empty";
+import { cn } from "@/shared/utils/ui";
+
+interface EmptyStateProps {
+	title: ReactNode;
+	description?: ReactNode;
+	action?: ReactNode;
+	media?: ReactNode;
+	mediaVariant?: "default" | "icon";
+	className?: string;
+	contentClassName?: string;
+	children?: ReactNode;
+}
+
+export function EmptyState({
+	title,
+	description,
+	media,
+	mediaVariant = "default",
+	className,
+	contentClassName,
+	children,
+}: EmptyStateProps) {
+	const hasContent = Boolean(children);
+
+	return (
+		<Empty className={cn("w-full max-w-xl min-h-[320px]", className)}>
+			<EmptyHeader>
+				{media ? (
+					<EmptyMedia variant={mediaVariant} className="mb-0">
+						{media}
+					</EmptyMedia>
+				) : null}
+				<EmptyTitle>{title}</EmptyTitle>
+				{description ? (
+					<EmptyDescription>{description}</EmptyDescription>
+				) : null}
+			</EmptyHeader>
+
+			{hasContent ? (
+				<EmptyContent className={cn(contentClassName)}>{children}</EmptyContent>
+			) : null}
+		</Empty>
+	);
+}

src/shared/components/expandable-widget-card.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { RiExpandDiagonalLine } from "@remixicon/react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/shared/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import type { WidgetCardProps } from "@/shared/components/widget-card";
+import WidgetCard from "@/shared/components/widget-card";
+
+const OVERFLOW_THRESHOLD_PX = 16;
+const EXPANDABLE_CONTENT_CLASSNAME =
+	"max-h-[calc(var(--spacing-custom-height-card)-5rem)] overflow-hidden md:max-h-[calc(100%-5rem)]";
+
+export function ExpandableWidgetCard({
+	title,
+	subtitle,
+	icon,
+	children,
+	action,
+}: WidgetCardProps) {
+	const contentRef = useRef<HTMLDivElement | null>(null);
+	const [hasOverflow, setHasOverflow] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	useEffect(() => {
+		const element = contentRef.current;
+		if (!element) return;
+
+		let frameId = 0;
+
+		const checkOverflow = () => {
+			cancelAnimationFrame(frameId);
+			frameId = window.requestAnimationFrame(() => {
+				const hasOverflowNow =
+					element.scrollHeight - element.clientHeight > OVERFLOW_THRESHOLD_PX;
+				setHasOverflow((currentValue) =>
+					currentValue === hasOverflowNow ? currentValue : hasOverflowNow,
+				);
+			});
+		};
+
+		checkOverflow();
+
+		const resizeObserver = new ResizeObserver(checkOverflow);
+		resizeObserver.observe(element);
+
+		return () => {
+			cancelAnimationFrame(frameId);
+			resizeObserver.disconnect();
+		};
+	}, []);
+
+	return (
+		<>
+			<WidgetCard
+				title={title}
+				subtitle={subtitle}
+				icon={icon}
+				action={action}
+				contentRef={contentRef}
+				contentClassName={EXPANDABLE_CONTENT_CLASSNAME}
+				overlay={
+					hasOverflow ? (
+						<div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center bg-linear-to-t from-card to-transparent pt-12 pb-6">
+							<Button
+								variant="secondary"
+								className="pointer-events-auto rounded-full text-xs"
+								onClick={() => setIsOpen(true)}
+								aria-label="Expandir para ver todo o conteúdo"
+							>
+								Ver tudo <RiExpandDiagonalLine size={10} aria-hidden="true" />
+							</Button>
+						</div>
+					) : null
+				}
+			>
+				{children}
+			</WidgetCard>
+
+			<Dialog open={isOpen} onOpenChange={setIsOpen}>
+				<DialogContent className="max-h-[85vh] w-full max-w-[calc(100%-2rem)] sm:max-w-3xl overflow-hidden p-6">
+					<DialogHeader className="text-left">
+						<DialogTitle className="flex items-center gap-2">
+							{icon}
+							<span>{title}</span>
+						</DialogTitle>
+						{subtitle ? (
+							<p className="text-muted-foreground text-sm">{subtitle}</p>
+						) : null}
+					</DialogHeader>
+					<div className="scrollbar-hide max-h-[calc(85vh-6rem)] overflow-y-auto pb-6">
+						{children}
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+}

src/shared/components/logo-picker/index.ts

@@ -0,0 +1 @@
+export { LogoPickerDialog, LogoPickerTrigger } from "./logo-picker";

src/shared/components/logo-picker/logo-picker.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { deriveNameFromLogo, resolveLogoSrc } from "@/shared/lib/logo";
+import { cn } from "@/shared/utils/ui";
+
+const DEFAULT_BASE_PATH = "/logos";
+
+interface LogoPickerTriggerProps {
+	selectedLogo?: string | null;
+	disabled?: boolean;
+	helperText?: string;
+	placeholder?: string;
+	basePath?: string;
+	onOpen: () => void;
+	className?: string;
+}
+
+export function LogoPickerTrigger({
+	selectedLogo,
+	disabled,
+	helperText = "Clique para trocar o logo",
+	placeholder = "Selecionar logo",
+	basePath = DEFAULT_BASE_PATH,
+	onOpen,
+	className,
+}: LogoPickerTriggerProps) {
+	const hasLogo = Boolean(selectedLogo);
+	const selectedLogoLabel = deriveNameFromLogo(selectedLogo);
+	const selectedLogoPath =
+		hasLogo && selectedLogo ? resolveLogoSrc(selectedLogo, { basePath }) : null;
+
+	return (
+		<button
+			type="button"
+			onClick={onOpen}
+			disabled={disabled}
+			className={cn(
+				"flex w-full items-center gap-2 rounded-md border p-2 text-left transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
+				className,
+			)}
+		>
+			<span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/40 bg-background shadow-xs">
+				{selectedLogoPath ? (
+					<Image
+						src={selectedLogoPath}
+						alt={selectedLogoLabel || "Logo selecionado"}
+						width={28}
+						height={28}
+						className="h-full w-full object-contain"
+					/>
+				) : (
+					<span className="text-[10px] text-muted-foreground">Logo</span>
+				)}
+			</span>
+
+			<span className="flex min-w-0 flex-1 flex-col">
+				<span className="truncate text-sm font-medium text-foreground">
+					{selectedLogoLabel || placeholder}
+				</span>
+				<span className="text-xs text-muted-foreground">
+					{disabled ? "Nenhum logo disponível" : helperText}
+				</span>
+			</span>
+		</button>
+	);
+}
+
+interface LogoPickerDialogProps {
+	open: boolean;
+	logos: string[];
+	value: string;
+	onOpenChange: (open: boolean) => void;
+	onSelect: (logo: string) => void;
+	basePath?: string;
+	title?: string;
+	description?: string;
+	emptyState?: React.ReactNode;
+}
+
+export function LogoPickerDialog({
+	open,
+	logos,
+	value,
+	onOpenChange,
+	onSelect,
+	basePath = DEFAULT_BASE_PATH,
+	title = "Escolher logo",
+	description = "Selecione o logo que será usado para identificar este item.",
+	emptyState,
+}: LogoPickerDialogProps) {
+	const [search, setSearch] = useState("");
+
+	const filteredLogos = logos.filter((logo) => {
+		if (!search.trim()) return true;
+		const logoLabel = deriveNameFromLogo(logo).toLowerCase();
+		return logoLabel.includes(search.toLowerCase().trim());
+	});
+
+	const handleOpenChange = (isOpen: boolean) => {
+		if (!isOpen) setSearch("");
+		onOpenChange(isOpen);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>{title}</DialogTitle>
+					{description ? (
+						<DialogDescription>{description}</DialogDescription>
+					) : null}
+				</DialogHeader>
+
+				{logos.length > 0 && (
+					<Input
+						type="text"
+						placeholder="Pesquisar..."
+						value={search}
+						onChange={(e) => setSearch(e.target.value)}
+						className="h-8 text-sm"
+					/>
+				)}
+
+				{logos.length === 0 ? (
+					(emptyState ?? (
+						<p className="text-sm text-muted-foreground">
+							Nenhum logo encontrado. Adicione arquivos na pasta de logos.
+						</p>
+					))
+				) : filteredLogos.length === 0 ? (
+					<p className="py-4 text-center text-sm text-muted-foreground">
+						Nenhum logo encontrado para &ldquo;{search}&rdquo;
+					</p>
+				) : (
+					<div className="grid max-h-custom-height-card grid-cols-4 gap-2 overflow-y-auto p-1 sm:grid-cols-4 md:grid-cols-5">
+						{filteredLogos.map((logo) => {
+							const isActive = value === logo;
+							const logoLabel = deriveNameFromLogo(logo);
+
+							return (
+								<button
+									type="button"
+									key={logo}
+									onClick={(e) => {
+										e.stopPropagation();
+										e.preventDefault();
+										onSelect(logo);
+									}}
+									onPointerDown={(e) => e.stopPropagation()}
+									onTouchStart={(e) => e.stopPropagation()}
+									className={cn(
+										"flex flex-col items-center gap-1 rounded-md bg-card p-2 text-center text-xs transition-all hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+										isActive &&
+											"border-primary bg-primary/5 ring-2 ring-primary/40",
+									)}
+								>
+									<span className="flex w-full items-center justify-center overflow-hidden rounded-full">
+										<Image
+											src={resolveLogoSrc(logo, { basePath }) ?? logo}
+											alt={logoLabel || logo}
+											width={40}
+											height={40}
+											className="rounded-full"
+										/>
+									</span>
+									<span className="line-clamp-1 text-[10px] leading-tight text-muted-foreground">
+										{logoLabel}
+									</span>
+								</button>
+							);
+						})}
+					</div>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+}

src/shared/components/logo-picker/use-logo-selection.ts

@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import { deriveNameFromLogo } from "@/shared/lib/logo";
+
+interface UseLogoSelectionProps {
+	mode: "create" | "update";
+	currentLogo: string;
+	currentName: string;
+	onUpdate: (updates: { logo: string; name?: string }) => void;
+}
+
+/**
+ * Hook for handling logo selection with automatic name derivation
+ *
+ * When a logo is selected, automatically updates the name field if:
+ * - Mode is "create", OR
+ * - Current name is empty, OR
+ * - Current name matches the previously derived name from logo
+ *
+ * @param props Configuration for logo selection behavior
+ * @returns Handler function for logo selection
+ *
+ * @example
+ * ```tsx
+ * const handleLogoSelection = useLogoSelection({
+ *   mode: 'create',
+ *   currentLogo: formState.logo,
+ *   currentName: formState.name,
+ *   onUpdate: (updates) => updateFields(updates)
+ * });
+ * ```
+ */
+export function useLogoSelection({
+	mode,
+	currentLogo,
+	currentName,
+	onUpdate,
+}: UseLogoSelectionProps) {
+	const handleLogoSelection = useCallback(
+		(newLogo: string) => {
+			const derived = deriveNameFromLogo(newLogo);
+			const previousDerived = deriveNameFromLogo(currentLogo);
+
+			const shouldUpdateName =
+				mode === "create" ||
+				currentName.trim().length === 0 ||
+				previousDerived === currentName.trim();
+
+			if (shouldUpdateName) {
+				onUpdate({ logo: newLogo, name: derived });
+			} else {
+				onUpdate({ logo: newLogo });
+			}
+		},
+		[mode, currentLogo, currentName, onUpdate],
+	);
+
+	return handleLogoSelection;
+}

src/shared/components/logo.tsx

@@ -0,0 +1,82 @@
+import Image from "next/image";
+import { version } from "@/package.json";
+import { cn } from "@/shared/utils/ui";
+
+interface LogoProps {
+	variant?: "full" | "small" | "compact";
+	className?: string;
+	showVersion?: boolean;
+	invertTextOnDark?: boolean;
+}
+
+export function Logo({
+	variant = "full",
+	className,
+	showVersion = false,
+	invertTextOnDark = true,
+}: LogoProps) {
+	if (variant === "compact") {
+		return (
+			<div className={cn("flex items-center gap-1", className)}>
+				<Image
+					src="/images/logo_small.png"
+					alt="OpenMonetis"
+					width={32}
+					height={32}
+					className="object-contain brightness-0 saturate-0"
+					priority
+				/>
+				<Image
+					src="/images/logo_text.png"
+					alt="OpenMonetis"
+					width={110}
+					height={32}
+					className={cn(
+						"hidden object-contain sm:block",
+						invertTextOnDark && "dark:invert",
+					)}
+					priority
+				/>
+			</div>
+		);
+	}
+
+	if (variant === "small") {
+		return (
+			<Image
+				src="/images/logo_small.png"
+				alt="OpenMonetis"
+				width={32}
+				height={32}
+				className={cn("object-contain", className)}
+				priority
+			/>
+		);
+	}
+
+	return (
+		<div className={cn("flex items-center gap-1.5 py-4", className)}>
+			<Image
+				src="/images/logo_small.png"
+				alt="OpenMonetis"
+				width={28}
+				height={28}
+				className="object-contain"
+				priority
+			/>
+			<Image
+				src="/images/logo_text.png"
+				alt="OpenMonetis"
+				width={100}
+				height={32}
+				className={cn("object-contain", invertTextOnDark && "dark:invert")}
+				priority
+			/>
+			{showVersion && (
+				<span className="text-[9px] font-medium text-muted-foreground">
+					{version}
+				</span>
+			)}
+		</div>
+	);
+}

src/shared/components/money-values.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { usePrivacyMode } from "@/shared/components/providers/privacy-provider";
+import { formatCurrency } from "@/shared/utils/currency";
+import { cn } from "@/shared/utils/ui";
+
+type Props = {
+	amount: number;
+	className?: string;
+	showPositiveSign?: boolean;
+};
+
+function MoneyValues({ amount, className, showPositiveSign = false }: Props) {
+	const { privacyMode } = usePrivacyMode();
+	const formattedValue = formatCurrency(amount);
+
+	const displayValue =
+		showPositiveSign && amount > 0 ? `+${formattedValue}` : formattedValue;
+
+	return (
+		<span
+			style={{ fontFamily: "var(--font-money)" }}
+			className={cn(
+				"inline-flex items-baseline transition-all duration-200 tracking-tighter",
+				privacyMode &&
+					"blur-[6px] select-none hover:blur-none focus-within:blur-none",
+				className,
+			)}
+			aria-label={privacyMode ? "Valor oculto" : displayValue}
+			data-privacy={privacyMode ? "hidden" : undefined}
+			title={
+				privacyMode ? "Valor oculto - passe o mouse para revelar" : undefined
+			}
+		>
+			{displayValue}
+		</span>
+	);
+}
+
+export default MoneyValues;

src/shared/components/month-picker/loading-spinner.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { RiLoader2Line } from "@remixicon/react";
+
+const LoadingSpinner = () => (
+	<RiLoader2Line size={"20"} className="animate-spin" />
+);
+
+export default LoadingSpinner;

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

@@ -0,0 +1,80 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useTransition } from "react";
+import { Card } from "@/shared/components/ui/card";
+import { getNextPeriod, getPreviousPeriod } from "@/shared/utils/period";
+import LoadingSpinner from "./loading-spinner";
+import NavigationButton from "./nav-button";
+import ReturnButton from "./return-button";
+import { useMonthPeriod } from "./use-month-period";
+
+export default function MonthNavigation() {
+	const { period, currentMonth, currentYear, defaultPeriod, buildHref } =
+		useMonthPeriod();
+
+	const router = useRouter();
+	const [isPending, startTransition] = useTransition();
+
+	const currentMonthLabel = `${currentMonth.charAt(0).toUpperCase()}${currentMonth.slice(1)} ${currentYear}`;
+	const prevTarget = buildHref(getPreviousPeriod(period));
+	const nextTarget = buildHref(getNextPeriod(period));
+	const returnTarget = buildHref(defaultPeriod);
+	const isDifferentFromCurrent = period !== defaultPeriod;
+
+	// Prefetch otimizado: apenas meses adjacentes (M-1, M+1) e mês atual
+	// Isso melhora a performance da navegação sem sobrecarregar o cliente
+	useEffect(() => {
+		// Prefetch do mês anterior e próximo para navegação instantânea
+		router.prefetch(prevTarget);
+		router.prefetch(nextTarget);
+
+		// Prefetch do mês atual se não estivermos nele
+		if (isDifferentFromCurrent) {
+			router.prefetch(returnTarget);
+		}
+	}, [router, prevTarget, nextTarget, returnTarget, isDifferentFromCurrent]);
+
+	const handleNavigate = (href: string) => {
+		startTransition(() => {
+			router.replace(href, { scroll: false });
+		});
+	};
+
+	return (
+		<Card className="flex w-full flex-row p-4 sticky top-16 z-10 backdrop-blur-sm bg-card/30">
+			<div className="flex items-center gap-1">
+				<NavigationButton
+					direction="left"
+					disabled={isPending}
+					onClick={() => handleNavigate(prevTarget)}
+				/>
+
+				<div className="flex items-center">
+					<div
+						className="mx-1 space-x-1 capitalize font-semibold"
+						aria-current={!isDifferentFromCurrent ? "date" : undefined}
+						aria-label={`Período selecionado: ${currentMonthLabel}`}
+					>
+						<span>{currentMonthLabel}</span>
+					</div>
+
+					{isPending && <LoadingSpinner />}
+				</div>
+
+				<NavigationButton
+					direction="right"
+					disabled={isPending}
+					onClick={() => handleNavigate(nextTarget)}
+				/>
+			</div>
+
+			{isDifferentFromCurrent && (
+				<ReturnButton
+					disabled={isPending}
+					onClick={() => handleNavigate(returnTarget)}
+				/>
+			)}
+		</Card>
+	);
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
+
+interface NavigationButtonProps {
+	direction: "left" | "right";
+	disabled?: boolean;
+	onClick: () => void;
+}
+
+export default function NavigationButton({
+	direction,
+	disabled,
+	onClick,
+}: NavigationButtonProps) {
+	const Icon = direction === "left" ? RiArrowLeftSLine : RiArrowRightSLine;
+
+	return (
+		<button
+			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} />
+		</button>
+	);
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { Button } from "@/shared/components/ui/button";
+
+interface ReturnButtonProps {
+	disabled?: boolean;
+	onClick: () => void;
+}
+
+export default function ReturnButton({ disabled, onClick }: ReturnButtonProps) {
+	return (
+		<Button
+			className="w-max h-6 lowercase"
+			size="sm"
+			disabled={disabled}
+			onClick={onClick}
+			aria-label="Retornar para o mês atual"
+		>
+			Mês Atual
+		</Button>
+	);
+}

src/shared/components/month-picker/use-month-period.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useRef } from "react";
+
+import {
+	formatPeriod,
+	formatPeriodForUrl,
+	parsePeriodParam,
+} from "@/shared/utils/period";
+
+const PERIOD_PARAM = "periodo";
+
+export function useMonthPeriod() {
+	const searchParams = useSearchParams();
+	const pathname = usePathname();
+	const periodFromParams = searchParams.get(PERIOD_PARAM);
+	const referenceDate = useRef(new Date()).current;
+	const defaultPeriod = formatPeriod(
+		referenceDate.getFullYear(),
+		referenceDate.getMonth() + 1,
+	);
+	const { period, monthName, year } = parsePeriodParam(
+		periodFromParams,
+		referenceDate,
+	);
+
+	const buildHref = (targetPeriod: string) => {
+		const params = new URLSearchParams(searchParams.toString());
+		params.set(PERIOD_PARAM, formatPeriodForUrl(targetPeriod));
+
+		return `${pathname}?${params.toString()}`;
+	};
+
+	return {
+		period,
+		currentMonth: monthName,
+		currentYear: year.toString(),
+		defaultPeriod,
+		buildHref,
+	};
+}
+
+export { PERIOD_PARAM as MONTH_PERIOD_PARAM };

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>
+	);
+}

src/shared/components/page-description.tsx

@@ -0,0 +1,21 @@
+export default function PageDescription({
+	title,
+	subtitle,
+	icon,
+}: {
+	title?: string;
+	subtitle?: string;
+	icon?: React.ReactNode;
+}) {
+	return (
+		<div>
+			<h1 className="text-2xl font-semibold flex items-center gap-1 tracking-tighter">
+				<span className="text-primary">{icon}</span>
+				{title}
+			</h1>
+			<h2 className="text-sm max-w-2xl text-muted-foreground leading-relaxed mt-2">
+				{subtitle}
+			</h2>
+		</div>
+	);
+}

src/shared/components/period-picker.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { RiCalendarLine } from "@remixicon/react";
+import { useState } from "react";
+import { Button } from "@/shared/components/ui/button";
+import { MonthPicker } from "@/shared/components/ui/month-picker";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import {
+	dateToPeriod,
+	formatMonthYearLabel,
+	periodToDate,
+} from "@/shared/utils/period";
+import { cn } from "@/shared/utils/ui";
+
+interface PeriodPickerProps {
+	value: string; // "YYYY-MM" format
+	onChange: (value: string) => void;
+	disabled?: boolean;
+	className?: string;
+	placeholder?: string;
+	variant?: "default" | "outline" | "ghost";
+	size?: "default" | "sm" | "lg";
+}
+
+export function PeriodPicker({
+	value,
+	onChange,
+	disabled = false,
+	className,
+	placeholder = "Selecione o período",
+	variant = "outline",
+	size = "default",
+}: PeriodPickerProps) {
+	const [open, setOpen] = useState(false);
+
+	const handleSelect = (date: Date) => {
+		const period = dateToPeriod(date);
+		onChange(period);
+		setOpen(false);
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant={variant}
+					size={size}
+					disabled={disabled}
+					className={cn(
+						"justify-start text-left font-normal capitalize",
+						!value && "text-muted-foreground",
+						className,
+					)}
+				>
+					<RiCalendarLine className="h-4 w-4" />
+					{value ? formatMonthYearLabel(value) : placeholder}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" align="start">
+				<MonthPicker
+					selectedMonth={value ? periodToDate(value) : new Date()}
+					onMonthSelect={handleSelect}
+				/>
+			</PopoverContent>
+		</Popover>
+	);
+}

src/shared/components/providers/font-provider.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { getFontVariable } from "@/public/fonts/font_index";
+
+type FontContextValue = {
+	systemFont: string;
+	moneyFont: string;
+	setSystemFont: (key: string) => void;
+	setMoneyFont: (key: string) => void;
+};
+
+const FontContext = createContext<FontContextValue | null>(null);
+
+export function FontProvider({
+	systemFont: initialSystemFont,
+	moneyFont: initialMoneyFont,
+	children,
+}: {
+	systemFont: string;
+	moneyFont: string;
+	children: React.ReactNode;
+}) {
+	const [systemFont, setSystemFontState] = useState(initialSystemFont);
+	const [moneyFont, setMoneyFontState] = useState(initialMoneyFont);
+
+	useEffect(() => {
+		document.documentElement.style.setProperty(
+			"--font-app",
+			getFontVariable(systemFont),
+		);
+		document.documentElement.style.setProperty(
+			"--font-money",
+			getFontVariable(moneyFont),
+		);
+	}, [systemFont, moneyFont]);
+
+	const value = useMemo(
+		() => ({
+			systemFont,
+			moneyFont,
+			setSystemFont: setSystemFontState,
+			setMoneyFont: setMoneyFontState,
+		}),
+		[systemFont, moneyFont],
+	);
+
+	return (
+		<>
+			<style
+				dangerouslySetInnerHTML={{
+					__html: `:root { --font-app: ${getFontVariable(initialSystemFont)}; --font-money: ${getFontVariable(initialMoneyFont)}; }`,
+				}}
+			/>
+			<FontContext value={value}>{children}</FontContext>
+		</>
+	);
+}
+
+export function useFont() {
+	const ctx = useContext(FontContext);
+	if (!ctx) {
+		throw new Error("useFont must be used within FontProvider");
+	}
+	return ctx;
+}

src/shared/components/providers/index.ts

@@ -0,0 +1,3 @@
+export { FontProvider } from "./font-provider";
+export { PrivacyProvider } from "./privacy-provider";
+export { ThemeProvider } from "./theme-provider";

src/shared/components/providers/privacy-provider.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import type React from "react";
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useMemo,
+	useSyncExternalStore,
+} from "react";
+
+interface PrivacyContextType {
+	privacyMode: boolean;
+	toggle: () => void;
+	set: (value: boolean) => void;
+}
+
+const PrivacyContext = createContext<PrivacyContextType | undefined>(undefined);
+
+const STORAGE_KEY = "app:privacyMode";
+const PRIVACY_MODE_EVENT = "openmonetis:privacy-mode";
+
+// Read from localStorage safely (returns false on server)
+function getStoredValue(): boolean {
+	if (typeof window === "undefined") return false;
+	return localStorage.getItem(STORAGE_KEY) === "true";
+}
+
+function notifyPrivacyModeChange() {
+	window.dispatchEvent(new Event(PRIVACY_MODE_EVENT));
+}
+
+// Subscribe to storage changes
+function subscribeToStorage(callback: () => void) {
+	window.addEventListener("storage", callback);
+	window.addEventListener(PRIVACY_MODE_EVENT, callback);
+	return () => {
+		window.removeEventListener("storage", callback);
+		window.removeEventListener(PRIVACY_MODE_EVENT, callback);
+	};
+}
+
+export function PrivacyProvider({ children }: { children: React.ReactNode }) {
+	// useSyncExternalStore handles hydration safely
+	const privacyMode = useSyncExternalStore(
+		subscribeToStorage,
+		getStoredValue,
+		() => false, // Server snapshot
+	);
+
+	const setPrivacyMode = useCallback((value: boolean) => {
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		const nextValue = String(value);
+		if (localStorage.getItem(STORAGE_KEY) === nextValue) {
+			return;
+		}
+
+		localStorage.setItem(STORAGE_KEY, nextValue);
+		notifyPrivacyModeChange();
+	}, []);
+
+	const toggle = useCallback(() => {
+		setPrivacyMode(!privacyMode);
+	}, [privacyMode, setPrivacyMode]);
+
+	const contextValue = useMemo(
+		() => ({
+			privacyMode,
+			toggle,
+			set: setPrivacyMode,
+		}),
+		[privacyMode, toggle, setPrivacyMode],
+	);
+
+	return (
+		<PrivacyContext.Provider value={contextValue}>
+			{children}
+		</PrivacyContext.Provider>
+	);
+}
+
+export function usePrivacyMode() {
+	const context = useContext(PrivacyContext);
+	if (context === undefined) {
+		throw new Error("usePrivacyMode must be used within a PrivacyProvider");
+	}
+	return context;
+}

src/shared/components/providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";
+
+export function ThemeProvider({
+	children,
+	...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/shared/components/refresh-page-button.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { RiRefreshLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import { buttonVariants } from "@/shared/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/utils/ui";
+
+type RefreshPageButtonProps = React.ComponentPropsWithoutRef<"button">;
+
+export function RefreshPageButton({
+	className,
+	...props
+}: RefreshPageButtonProps) {
+	const router = useRouter();
+	const [isPending, startTransition] = useTransition();
+
+	const handleClick = () => {
+		startTransition(() => {
+			router.refresh();
+		});
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					onClick={handleClick}
+					disabled={isPending}
+					aria-label="Atualizar página"
+					title="Atualizar página"
+					className={cn(
+						buttonVariants({ variant: "ghost", size: "icon-sm" }),
+						"size-8 text-muted-foreground transition-all duration-200",
+						"hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40 border",
+						"disabled:pointer-events-none disabled:opacity-50",
+						className,
+					)}
+					{...props}
+				>
+					<RiRefreshLine
+						className={cn(
+							"size-4 transition-transform duration-200",
+							isPending && "animate-spin",
+						)}
+						aria-hidden
+					/>
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="bottom">Atualizar página</TooltipContent>
+		</Tooltip>
+	);
+}

src/shared/components/skeletons/account-statement-card-skeleton.tsx

@@ -0,0 +1,43 @@
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+/**
+ * Skeleton para o card de resumo da conta (AccountStatementCard)
+ * Reflete fielmente o layout: logo + nome + tipo + badge + métricas
+ */
+export function AccountStatementCardSkeleton() {
+	return (
+		<div className="rounded-2xl border p-6 space-y-6">
+			{/* Header com logo, nome, tipo e badge */}
+			<div className="flex items-start justify-between">
+				<div className="flex items-start gap-4">
+					{/* Logo */}
+					<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+
+					<div className="space-y-2">
+						{/* Nome da conta */}
+						<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+						{/* Tipo de conta */}
+						<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" />
+					</div>
+				</div>
+
+				<div className="flex items-center gap-2">
+					{/* Badge de status */}
+					<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+					{/* Botão de editar */}
+					<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+				</div>
+			</div>
+
+			{/* Métricas em grid */}
+			<div className="grid grid-cols-2 gap-4 pt-4 border-t md:grid-cols-4">
+				{Array.from({ length: 4 }).map((_, i) => (
+					<div key={i} className="space-y-2">
+						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/shared/components/skeletons/category-report-skeleton.tsx

@@ -0,0 +1,193 @@
+import { Card } from "@/shared/components/ui/card";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/shared/components/ui/table";
+import { Tabs, TabsContent, TabsList } from "@/shared/components/ui/tabs";
+
+/**
+ * Skeleton para a página de relatórios de categorias
+ * Mantém a mesma estrutura de filtros, tabs e conteúdo
+ */
+export function CategoryReportSkeleton() {
+	return (
+		<div className="flex flex-col gap-6">
+			{/* Filters Skeleton */}
+			<div className="flex flex-col gap-4">
+				<div className="flex flex-wrap items-center justify-between gap-2">
+					<div className="flex flex-wrap items-center gap-2">
+						{/* Category MultiSelect */}
+						<Skeleton className="h-10 w-[200px] rounded-2xl bg-foreground/10" />
+						{/* Start Period */}
+						<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+						{/* End Period */}
+						<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+						{/* Clear Button */}
+						<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+					</div>
+					{/* Export Button */}
+					<Skeleton className="h-10 w-[120px] rounded-2xl bg-foreground/10" />
+				</div>
+			</div>
+
+			{/* Tabs Skeleton */}
+			<Tabs value="table" className="w-full">
+				<TabsList>
+					<div className="flex gap-1">
+						<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" />
+					</div>
+				</TabsList>
+
+				<TabsContent value="table" className="mt-4">
+					{/* Desktop Table Skeleton */}
+					<div className="hidden md:block">
+						<CategoryReportTableSkeleton />
+					</div>
+
+					{/* Mobile Cards Skeleton */}
+					<div className="md:hidden space-y-3">
+						{Array.from({ length: 5 }).map((_, i) => (
+							<Card key={i} className="p-4">
+								<div className="space-y-3">
+									{/* Category name with icon */}
+									<div className="flex items-center gap-2">
+										<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+										<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+									</div>
+									{/* Type badge */}
+									<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+									{/* Values */}
+									<div className="space-y-2">
+										{Array.from({ length: 3 }).map((_, j) => (
+											<div
+												key={j}
+												className="flex items-center justify-between"
+											>
+												<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+												<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+											</div>
+										))}
+									</div>
+								</div>
+							</Card>
+						))}
+					</div>
+				</TabsContent>
+
+				<TabsContent value="chart" className="mt-4">
+					{/* Chart Skeleton */}
+					<Card className="p-6">
+						<div className="space-y-4">
+							{/* Chart title area */}
+							<div className="flex items-center justify-between">
+								<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+							</div>
+							{/* Chart area */}
+							<Skeleton className="h-[400px] w-full rounded-2xl bg-foreground/10" />
+							{/* Legend */}
+							<div className="flex flex-wrap gap-4 justify-center">
+								{Array.from({ length: 6 }).map((_, i) => (
+									<div key={i} className="flex items-center gap-2">
+										<Skeleton className="size-3 rounded-full bg-foreground/10" />
+										<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+									</div>
+								))}
+							</div>
+						</div>
+					</Card>
+				</TabsContent>
+			</Tabs>
+		</div>
+	);
+}
+
+/**
+ * Skeleton para a tabela de relatórios de categorias
+ * Mantém a estrutura de colunas: Categoria, Tipo, múltiplos períodos, Total
+ */
+function CategoryReportTableSkeleton() {
+	// Simula 6 períodos (colunas)
+	const periodColumns = 6;
+
+	return (
+		<Card className="px-6 py-4">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						{/* Categoria */}
+						<TableHead className="w-[280px] min-w-[280px]">
+							<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+						</TableHead>
+						{/* Period columns */}
+						{Array.from({ length: periodColumns }).map((_, i) => (
+							<TableHead key={i} className="text-right min-w-[120px]">
+								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10 ml-auto" />
+							</TableHead>
+						))}
+						{/* Total */}
+						<TableHead className="text-right min-w-[120px]">
+							<Skeleton className="h-4 w-10 rounded-2xl bg-foreground/10 ml-auto" />
+						</TableHead>
+					</TableRow>
+				</TableHeader>
+
+				<TableBody>
+					{Array.from({ length: 8 }).map((_, rowIndex) => (
+						<TableRow key={rowIndex}>
+							{/* Category name with dot and icon */}
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Skeleton className="size-2 rounded-full bg-foreground/10" />
+									<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" />
+								</div>
+							</TableCell>
+							{/* Period values */}
+							{Array.from({ length: periodColumns }).map((_, colIndex) => (
+								<TableCell key={colIndex} className="text-right">
+									<div className="flex flex-col items-end gap-1">
+										<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+										{colIndex > 0 && (
+											<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" />
+										)}
+									</div>
+								</TableCell>
+							))}
+							{/* Total */}
+							<TableCell className="text-right">
+								<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+
+				<TableFooter>
+					<TableRow>
+						{/* Total label */}
+						<TableCell className="font-bold">
+							<Skeleton className="h-5 w-16 rounded-2xl bg-foreground/10" />
+						</TableCell>
+						{/* Period totals */}
+						{Array.from({ length: periodColumns }).map((_, i) => (
+							<TableCell key={i} className="text-right">
+								<Skeleton className="h-5 w-24 rounded-2xl bg-foreground/10 ml-auto" />
+							</TableCell>
+						))}
+						{/* Grand total */}
+						<TableCell className="text-right">
+							<Skeleton className="h-5 w-28 rounded-2xl bg-foreground/10 ml-auto" />
+						</TableCell>
+					</TableRow>
+				</TableFooter>
+			</Table>
+		</Card>
+	);
+}

src/shared/components/skeletons/dashboard-grid-skeleton.tsx

@@ -0,0 +1,22 @@
+import { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton";
+import { WidgetSkeleton } from "./widget-skeleton";
+
+/**
+ * Skeleton completo para o dashboard grid
+ * Mantém a mesma estrutura de layout do dashboard real
+ */
+export function DashboardGridSkeleton() {
+	return (
+		<div className="@container/main space-y-4">
+			{/* Cards de métricas no topo */}
+			<DashboardMetricsCardsSkeleton />
+
+			{/* Grid de widgets - mesmos breakpoints do dashboard real */}
+			<div className="grid grid-cols-1 gap-3 @4xl/main:grid-cols-2 @6xl/main:grid-cols-3">
+				{Array.from({ length: 9 }).map((_, i) => (
+					<WidgetSkeleton key={i} />
+				))}
+			</div>
+		</div>
+	);
+}

src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx

@@ -0,0 +1,37 @@
+import { Card, CardFooter, CardHeader } from "@/shared/components/ui/card";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+/**
+ * Skeleton fiel aos cards de métricas do dashboard (DashboardMetricsCards)
+ * Mantém o mesmo layout de 4 colunas responsivo
+ */
+export function DashboardMetricsCardsSkeleton() {
+	return (
+		<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+			{Array.from({ length: 4 }).map((_, index) => (
+				<Card key={index} className="@container/card gap-2">
+					<CardHeader>
+						<div className="space-y-3">
+							{/* Título com ícone */}
+							<div className="flex items-center gap-1">
+								<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
+							</div>
+
+							{/* Valor principal */}
+							<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+
+							{/* Badge de tendência */}
+							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+						</div>
+					</CardHeader>
+
+					<CardFooter className="flex-col items-start gap-1.5 text-sm">
+						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+					</CardFooter>
+				</Card>
+			))}
+		</div>
+	);
+}

src/shared/components/skeletons/filter-skeleton.tsx

@@ -0,0 +1,20 @@
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+/**
+ * Skeleton para os filtros de lançamentos
+ * Mantém o layout horizontal com múltiplos selects
+ */
+export function FilterSkeleton() {
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			{Array.from({ length: 6 }).map((_, i) => (
+				<Skeleton
+					key={i}
+					className="h-10 w-[130px] rounded-2xl bg-foreground/10"
+				/>
+			))}
+			<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+			<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+		</div>
+	);
+}

src/shared/components/skeletons/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Barrel export para todos os skeletons
+ * Facilita a importação em outros componentes
+ */
+export { AccountStatementCardSkeleton } from "./account-statement-card-skeleton";
+export { CategoryReportSkeleton } from "./category-report-skeleton";
+export { DashboardGridSkeleton } from "./dashboard-grid-skeleton";
+export { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton";
+export { FilterSkeleton } from "./filter-skeleton";
+export { InvoiceSummaryCardSkeleton } from "./invoice-summary-card-skeleton";
+export { TransactionsTableSkeleton } from "./transactions-table-skeleton";
+export { WidgetSkeleton } from "./widget-skeleton";

src/shared/components/skeletons/invoice-summary-card-skeleton.tsx

@@ -0,0 +1,64 @@
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+/**
+ * Skeleton para o card de resumo da fatura (InvoiceSummaryCard)
+ * Reflete fielmente o layout: logo + nome + bandeira + badges + total + limite + ações
+ */
+export function InvoiceSummaryCardSkeleton() {
+	return (
+		<div className="rounded-2xl border p-6 space-y-6">
+			{/* Header com logo, nome, bandeira e badges */}
+			<div className="flex items-start justify-between">
+				<div className="flex items-start gap-4">
+					{/* Logo do cartão */}
+					<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+
+					<div className="space-y-2">
+						{/* Nome do cartão */}
+						<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+
+						<div className="flex items-center gap-2">
+							{/* Bandeira */}
+							<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+							{/* Badge de status */}
+							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+						</div>
+					</div>
+				</div>
+
+				{/* Botão de editar */}
+				<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+			</div>
+
+			{/* Informações da fatura */}
+			<div className="space-y-4 pt-4 border-t">
+				{/* Período e status */}
+				<div className="flex items-center justify-between">
+					<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-6 w-24 rounded-2xl bg-foreground/10" />
+				</div>
+
+				{/* Total da fatura */}
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-28 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-40 rounded-2xl bg-foreground/10" />
+				</div>
+
+				{/* Limite e utilização */}
+				<div className="grid grid-cols-2 gap-4 pt-4">
+					<div className="space-y-2">
+						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+					</div>
+					<div className="space-y-2">
+						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+					</div>
+				</div>
+
+				{/* Botão de ação */}
+				<Skeleton className="h-10 w-full rounded-2xl bg-foreground/10" />
+			</div>
+		</div>
+	);
+}

src/shared/components/skeletons/transactions-table-skeleton.tsx

@@ -0,0 +1,84 @@
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/shared/components/ui/table";
+
+/**
+ * Skeleton fiel à tabela de lançamentos
+ * Mantém a mesma estrutura de colunas
+ */
+export function TransactionsTableSkeleton() {
+	return (
+		<div className="rounded-2xl border">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead className="w-[180px]">Nome</TableHead>
+						<TableHead className="w-[100px]">Data</TableHead>
+						<TableHead className="w-[120px]">Tipo</TableHead>
+						<TableHead className="w-[120px]">Valor</TableHead>
+						<TableHead className="w-[120px]">Condição</TableHead>
+						<TableHead className="w-[120px]">Pagamento</TableHead>
+						<TableHead className="w-[140px]">Pagador</TableHead>
+						<TableHead className="w-[140px]">Categoria</TableHead>
+						<TableHead className="w-[140px]">Conta/Cartão</TableHead>
+						<TableHead className="w-[80px]">Ações</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{Array.from({ length: 8 }).map((_, i) => (
+						<TableRow key={i}>
+							<TableCell>
+								<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Skeleton className="size-6 rounded-full bg-foreground/10" />
+									<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Skeleton className="size-6 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex gap-1">
+									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}

src/shared/components/skeletons/widget-skeleton.tsx

@@ -0,0 +1,44 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+/**
+ * Skeleton fiel ao WidgetCard
+ * Usado enquanto widgets do dashboard estão carregando
+ */
+export function WidgetSkeleton() {
+	return (
+		<Card className="relative h-auto gap-0 py-0 md:h-custom-height-card md:overflow-hidden">
+			<CardHeader className="border-b px-6 py-4">
+				<div className="flex w-full items-start justify-between">
+					<div className="min-w-0 space-y-1.5">
+						{/* Title com ícone */}
+						<div className="flex items-center gap-2">
+							<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+						</div>
+						{/* Subtitle */}
+						<Skeleton className="h-3 w-48 rounded-2xl bg-foreground/10" />
+					</div>
+				</div>
+			</CardHeader>
+
+			<CardContent className="min-h-0 flex-1 overflow-hidden px-6 py-4">
+				<div className="flex flex-col gap-3">
+					{/* Simula 5 linhas de conteúdo */}
+					{Array.from({ length: 5 }).map((_, i) => (
+						<div key={i} className="flex items-center justify-between gap-3">
+							<div className="flex flex-1 items-center gap-3">
+								<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+								<div className="flex-1 space-y-2">
+									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
+								</div>
+							</div>
+							<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+						</div>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

src/shared/components/status-dot.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@/shared/utils";
+
+type StatusDotProps = {
+	color: string;
+	className?: string;
+};
+
+export default function StatusDot({ color, className }: StatusDotProps) {
+	return (
+		<span
+			className={cn(
+				"inline-block size-2 shrink-0 rounded-full",
+				color,
+				className,
+			)}
+			aria-hidden="true"
+		/>
+	);
+}

src/shared/components/type-badge.tsx

@@ -0,0 +1,63 @@
+import { Badge } from "@/shared/components/ui/badge";
+import { cn } from "@/shared/utils/ui";
+import StatusDot from "./status-dot";
+
+type TypeBadgeType =
+	| "receita"
+	| "despesa"
+	| "Receita"
+	| "Despesa"
+	| "Transferência"
+	| "transferência"
+	| "Saldo inicial"
+	| "Saldo Inicial";
+
+interface TypeBadgeProps {
+	type: TypeBadgeType | string;
+	className?: string;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+	receita: "Receita",
+	despesa: "Despesa",
+	Receita: "Receita",
+	Despesa: "Despesa",
+	Transferência: "Transferência",
+	transferência: "Transferência",
+	"Saldo inicial": "Saldo Inicial",
+	"Saldo Inicial": "Saldo Inicial",
+};
+
+export function TypeBadge({ type, className }: TypeBadgeProps) {
+	const normalizedType = type.toLowerCase();
+	const isReceita = normalizedType === "receita";
+	const isTransferencia = normalizedType === "transferência";
+	const isSaldoInicial = normalizedType === "saldo inicial";
+	const label = TYPE_LABELS[type] || type;
+
+	const colorClass = isTransferencia
+		? "text-info"
+		: isReceita || isSaldoInicial
+			? "text-success"
+			: "text-destructive";
+
+	const dotColor = isTransferencia
+		? "bg-info"
+		: isReceita || isSaldoInicial
+			? "bg-success"
+			: "bg-destructive";
+
+	return (
+		<Badge
+			variant={"outline"}
+			className={cn(
+				"flex items-center gap-1 px-2 text-xs",
+				colorClass,
+				className,
+			)}
+		>
+			<StatusDot color={dotColor} />
+			{label}
+		</Badge>
+	);
+}

src/shared/components/ui/alert-dialog.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { buttonVariants } from "@/shared/components/ui/button";
+import { cn } from "@/shared/utils/ui";
+
+function AlertDialog({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return (
+		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+	);
+}
+
+function AlertDialogPortal({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return (
+		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+	);
+}
+
+function AlertDialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogContent({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogFooter({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row [&>button]:flex-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return (
+		<AlertDialogPrimitive.Action
+			className={cn(buttonVariants(), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return (
+		<AlertDialogPrimitive.Cancel
+			className={cn(buttonVariants({ variant: "outline" }), className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

src/shared/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

src/shared/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Avatar({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn(
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				"bg-muted flex size-full items-center justify-center rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

src/shared/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+const badgeVariants = cva(
+	"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				success:
+					"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90 dark:bg-success dark:[a&]:hover:bg-success/90",
+				info: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90 dark:bg-info dark:[a&]:hover:bg-info/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";
+
+	return (
+		<Comp
+			data-slot="badge"
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Badge, badgeVariants };

src/shared/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant = "default",
+	size = "default",
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

src/shared/components/ui/calendar.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {
+	RiArrowDownSLine,
+	RiArrowLeftSLine,
+	RiArrowRightSLine,
+} from "@remixicon/react";
+import * as React from "react";
+import {
+	type DayButton,
+	DayPicker,
+	getDefaultClassNames,
+} from "react-day-picker";
+import { Button, buttonVariants } from "@/shared/components/ui/button";
+import { cn } from "@/shared/utils/ui";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
+	...props
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString("default", { month: "short" }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"flex gap-4 flex-col md:flex-row relative",
+					defaultClassNames.months,
+				),
+				month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+				nav: cn(
+					"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn(
+					"absolute bg-popover inset-0 opacity-0",
+					defaultClassNames.dropdown,
+				),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+					defaultClassNames.caption_label,
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+					defaultClassNames.weekday,
+				),
+				week: cn("flex w-full mt-2", defaultClassNames.week),
+				week_number_header: cn(
+					"select-none w-(--cell-size)",
+					defaultClassNames.week_number_header,
+				),
+				week_number: cn(
+					"text-[0.8rem] select-none text-muted-foreground",
+					defaultClassNames.week_number,
+				),
+				day: cn(
+					"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+					props.showWeekNumber
+						? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+						: "[&:first-child[data-selected=true]_button]:rounded-l-md",
+					defaultClassNames.day,
+				),
+				range_start: cn(
+					"rounded-l-md bg-accent",
+					defaultClassNames.range_start,
+				),
+				range_middle: cn("rounded-none", defaultClassNames.range_middle),
+				range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today,
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside,
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled,
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<RiArrowLeftSLine
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					if (orientation === "right") {
+						return (
+							<RiArrowRightSLine
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					return (
+						<RiArrowDownSLine className={cn("size-4", className)} {...props} />
+					);
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	);
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };

src/shared/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 border py-6 rounded-md hover:border-primary/50 transition-all ease-in-out duration-300",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+};

src/shared/components/ui/chart.tsx

@@ -0,0 +1,373 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/shared/utils/ui";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	);
+};
+
+type ChartContextProps = {
+	config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+	const context = React.useContext(ChartContext);
+
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
+
+	return context;
+}
+
+function ChartContainer({
+	id,
+	className,
+	children,
+	config,
+	style,
+	...props
+}: React.ComponentProps<"div"> & {
+	config: ChartConfig;
+	children: React.ComponentProps<
+		typeof RechartsPrimitive.ResponsiveContainer
+	>["children"];
+}) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	const [mounted, setMounted] = React.useState(false);
+
+	React.useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-slot="chart"
+				data-chart={chartId}
+				style={style}
+				className={cn(
+					"flex w-full min-w-0 min-h-[200px] justify-center text-xs aspect-video [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<div className="h-full w-full min-h-[200px] min-w-[280px]">
+					{mounted ? (
+						<RechartsPrimitive.ResponsiveContainer
+							width="100%"
+							height="100%"
+							minWidth={280}
+							minHeight={200}
+						>
+							{children}
+						</RechartsPrimitive.ResponsiveContainer>
+					) : null}
+				</div>
+			</div>
+		</ChartContext.Provider>
+	);
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+	const colorConfig = Object.entries(config).filter(
+		([, config]) => config.theme || config.color,
+	);
+
+	if (!colorConfig.length) {
+		return null;
+	}
+
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color =
+			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+			itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	}) {
+	const { config } = useChart();
+
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
+
+		const [item] = payload;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string"
+				? config[label as keyof typeof config]?.label || label
+				: itemConfig?.label;
+
+		if (labelFormatter) {
+			return (
+				<div className={cn("font-medium", labelClassName)}>
+					{labelFormatter(value, payload)}
+				</div>
+			);
+		}
+
+		if (!value) {
+			return null;
+		}
+
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey,
+	]);
+
+	if (!active || !payload?.length) {
+		return null;
+	}
+
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+
+	return (
+		<div
+			className={cn(
+				"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload
+					.filter((item) => item.type !== "none")
+					.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color || item.payload.fill || item.color;
+
+						return (
+							<div
+								key={item.dataKey}
+								className={cn(
+									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
+											</div>
+											{item.value && (
+												<span className="text-foreground font-mono font-medium tabular-nums">
+													{item.value.toLocaleString()}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
+}: React.ComponentProps<"div"> &
+	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+		hideIcon?: boolean;
+		nameKey?: string;
+	}) {
+	const { config } = useChart();
+
+	if (!payload?.length) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload
+				.filter((item) => item.type !== "none")
+				.map((item) => {
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+					return (
+						<div
+							key={item.value}
+							className={cn(
+								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+		</div>
+	);
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
+) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
+
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	if (
+		key in payload &&
+		typeof payload[key as keyof typeof payload] === "string"
+	) {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[
+			key as keyof typeof payloadPayload
+		] as string;
+	}
+
+	return configLabelKey in config
+		? config[configLabelKey]
+		: config[key as keyof typeof config];
+}
+
+export {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
+};

src/shared/components/ui/checkbox.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { RiCheckLine } from "@remixicon/react";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function Checkbox({
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none"
+			>
+				<RiCheckLine className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox };

src/shared/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/shared/components/ui/command.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { RiSearchLine } from "@remixicon/react";
+import { Command as CommandPrimitive } from "cmdk";
+import type * as React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { cn } from "@/shared/utils/ui";
+
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent
+				className={cn("overflow-hidden p-0", className)}
+				showCloseButton={showCloseButton}
+			>
+				<Command className="**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<RiSearchLine className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+};

src/shared/components/ui/currency-input.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+import { Input } from "./input";
+
+const BRL_FORMATTER = new Intl.NumberFormat("pt-BR", {
+	style: "currency",
+	currency: "BRL",
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2,
+});
+
+const digitsToDecimalString = (digits: string) => {
+	const sanitized = digits.replace(/\D/g, "");
+	if (sanitized.length === 0) {
+		return "";
+	}
+
+	const padded = sanitized.padStart(3, "0");
+	const integerPart = padded.slice(0, -2).replace(/^0+(?=\d)/, "") || "0";
+	const fractionPart = padded.slice(-2);
+
+	return `${integerPart}.${fractionPart}`;
+};
+
+const decimalToDigits = (value: string | undefined | null) => {
+	if (!value) {
+		return "";
+	}
+
+	const normalized = value.toString().replace(/\s/g, "").replace(",", ".");
+	const numeric = Number(normalized);
+
+	if (Number.isNaN(numeric)) {
+		return "";
+	}
+
+	const cents = Math.round(Math.abs(numeric) * 100);
+	return cents === 0 ? "0" : cents.toString();
+};
+
+const formatDigits = (digits: string) => {
+	if (digits.length === 0) {
+		return "";
+	}
+
+	const decimal = digitsToDecimalString(digits);
+	const numeric = Number(decimal);
+
+	if (Number.isNaN(numeric)) {
+		return "";
+	}
+
+	return BRL_FORMATTER.format(numeric);
+};
+
+export interface CurrencyInputProps
+	extends Omit<
+		React.ComponentProps<typeof Input>,
+		"value" | "defaultValue" | "type" | "inputMode" | "onChange"
+	> {
+	value: string;
+	onValueChange: (value: string) => void;
+}
+
+export const CurrencyInput = React.forwardRef<
+	HTMLInputElement,
+	CurrencyInputProps
+>(({ className, value, onValueChange, onBlur, onChange, ...props }, ref) => {
+	const digits = React.useMemo(() => decimalToDigits(value), [value]);
+	const displayValue = React.useMemo(() => formatDigits(digits), [digits]);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const rawValue = event.target.value;
+		const nextDigits = rawValue.replace(/\D/g, "");
+
+		if (nextDigits.length === 0) {
+			onValueChange("");
+		} else {
+			onValueChange(digitsToDecimalString(nextDigits));
+		}
+
+		onChange?.(event);
+	};
+
+	return (
+		<Input
+			{...props}
+			ref={ref}
+			type="text"
+			inputMode="decimal"
+			value={displayValue}
+			onChange={handleChange}
+			onBlur={onBlur}
+			className={cn(
+				"text-left font-medium tabular-nums tracking-tight",
+				className,
+			)}
+		/>
+	);
+});
+
+CurrencyInput.displayName = "CurrencyInput";

src/shared/components/ui/date-picker.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { RiCalendarLine } from "@remixicon/react";
+import { ptBR } from "date-fns/locale";
+import * as React from "react";
+
+import { Button } from "@/shared/components/ui/button";
+import { Calendar } from "@/shared/components/ui/calendar";
+import { Input } from "@/shared/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { parseLocalDateString, toLocalDateString } from "@/shared/utils/date";
+import { cn } from "@/shared/utils/ui";
+
+function formatDate(date: Date | undefined, compact = false): string {
+	if (!date) {
+		return "";
+	}
+
+	if (compact) {
+		return date
+			.toLocaleDateString("pt-BR", {
+				day: "numeric",
+				month: "short",
+			})
+			.replace(".", "")
+			.replace(" de ", " ");
+	}
+
+	return date.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "long",
+		year: "numeric",
+	});
+}
+
+function isValidDate(date: Date | undefined): boolean {
+	if (!date) {
+		return false;
+	}
+	return !Number.isNaN(date.getTime());
+}
+
+function dateToYYYYMMDD(date: Date | undefined): string {
+	return isValidDate(date) ? (toLocalDateString(date) ?? "") : "";
+}
+
+function parseYYYYMMDD(dateString: string): Date | undefined {
+	if (!dateString) {
+		return undefined;
+	}
+
+	// Parse YYYY-MM-DD format as local date
+	// IMPORTANT: new Date("2025-11-25") treats the date as UTC midnight,
+	// which in Brazil (UTC-3) becomes 2025-11-26 03:00 local time!
+	const ymdMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	if (ymdMatch) {
+		const date = parseLocalDateString(dateString);
+		return isValidDate(date) ? date : undefined;
+	}
+
+	// For other formats, return undefined instead of using native parser
+	// to avoid timezone issues
+	return undefined;
+}
+
+export interface DatePickerProps {
+	id?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	className?: string;
+	/** Show compact format like "10 mar" instead of "10 de março de 2025" */
+	compact?: boolean;
+}
+
+export function DatePicker({
+	id,
+	value = "",
+	onChange,
+	placeholder = "Selecione uma data",
+	required = false,
+	disabled = false,
+	className,
+	compact = false,
+}: DatePickerProps) {
+	const [open, setOpen] = React.useState(false);
+	const [date, setDate] = React.useState<Date | undefined>(() =>
+		parseYYYYMMDD(value),
+	);
+	const [month, setMonth] = React.useState<Date | undefined>(() =>
+		parseYYYYMMDD(value),
+	);
+	const [displayValue, setDisplayValue] = React.useState(() =>
+		formatDate(parseYYYYMMDD(value), compact),
+	);
+
+	// Sincronizar quando value externo mudar
+	React.useEffect(() => {
+		const newDate = parseYYYYMMDD(value);
+		setDate(newDate);
+		setMonth(newDate);
+		setDisplayValue(formatDate(newDate, compact));
+	}, [value, compact]);
+
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const inputValue = e.target.value;
+		setDisplayValue(inputValue);
+
+		const parsedDate = parseYYYYMMDD(inputValue);
+		if (isValidDate(parsedDate)) {
+			setDate(parsedDate);
+			setMonth(parsedDate);
+			onChange?.(dateToYYYYMMDD(parsedDate));
+		}
+	};
+
+	const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setOpen(true);
+		}
+	};
+
+	const handleCalendarSelect = (selectedDate: Date | undefined) => {
+		setDate(selectedDate);
+		setDisplayValue(formatDate(selectedDate, compact));
+		onChange?.(dateToYYYYMMDD(selectedDate));
+		setOpen(false);
+	};
+
+	return (
+		<div className={cn("relative flex gap-2", className)}>
+			<Input
+				id={id}
+				value={displayValue}
+				placeholder={placeholder}
+				className="bg-background pr-10"
+				onChange={handleInputChange}
+				onKeyDown={handleInputKeyDown}
+				required={required}
+				disabled={disabled}
+			/>
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<Button
+						type="button"
+						variant="ghost"
+						disabled={disabled}
+						className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+						aria-label="Abrir calendário"
+					>
+						<RiCalendarLine className="size-3.5" />
+						<span className="sr-only">Selecionar data</span>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-auto overflow-hidden p-0"
+					align="end"
+					alignOffset={-8}
+					sideOffset={10}
+				>
+					<Calendar
+						mode="single"
+						selected={date}
+						captionLayout="dropdown"
+						month={month}
+						onMonthChange={setMonth}
+						onSelect={handleCalendarSelect}
+						fromYear={2020}
+						toYear={new Date().getFullYear() + 10}
+						locale={ptBR}
+					/>
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
+}

src/shared/components/ui/dialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { RiCloseLine } from "@remixicon/react";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function Dialog({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn("fixed inset-0 z-50 bg-black/50", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-4 shadow-lg sm:p-10 sm:max-w-xl",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<RiCloseLine />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row [&>button]:flex-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

src/shared/components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/shared/utils/ui";
+
+function Drawer({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	return (
+		<DrawerPortal data-slot="drawer-portal">
+			<DrawerOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+					className,
+				)}
+				{...props}
+			>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn(
+				"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+};

src/shared/components/ui/dropdown-menu.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+	RiArrowRightSLine,
+	RiCheckboxBlankCircleFill,
+	RiCheckLine,
+} from "@remixicon/react";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<RiCheckLine className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<RiCheckboxBlankCircleFill className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-inset:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<RiArrowRightSLine className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};

src/shared/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/shared/utils/ui";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty"
+			className={cn(
+				"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-header"
+			className={cn(
+				"flex max-w-sm flex-col items-center gap-2 text-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const emptyMediaVariants = cva(
+	"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function EmptyMedia({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+	return (
+		<div
+			data-slot="empty-icon"
+			data-variant={variant}
+			className={cn(emptyMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-title"
+			className={cn("text-lg font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<div
+			data-slot="empty-description"
+			className={cn(
+				"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-content"
+			className={cn(
+				"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Empty,
+	EmptyHeader,
+	EmptyTitle,
+	EmptyDescription,
+	EmptyContent,
+	EmptyMedia,
+};

src/shared/components/ui/field.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+import { Label } from "@/shared/components/ui/label";
+import { Separator } from "@/shared/components/ui/separator";
+import { cn } from "@/shared/utils/ui";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				"flex flex-col gap-6",
+				"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLegend({
+	className,
+	variant = "legend",
+	...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				"mb-3 font-medium",
+				"data-[variant=legend]:text-base",
+				"data-[variant=label]:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const fieldVariants = cva(
+	"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+	{
+		variants: {
+			orientation: {
+				vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
+				horizontal: [
+					"flex-row items-center",
+					"*:data-[slot=field-label]:flex-auto",
+					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+				responsive: [
+					"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+					"@md/field-group:*:data-[slot=field-label]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	},
+);
+
+function Field({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn(
+				"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
+				"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				"text-muted-foreground text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
+				"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+				"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	children?: React.ReactNode;
+}) {
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+				className,
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
+}
+
+function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: React.ComponentProps<"div"> & {
+	errors?: Array<{ message?: string } | undefined>;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		if (!errors?.length) {
+			return null;
+		}
+
+		const uniqueErrors = [
+			...new Map(errors.map((error) => [error?.message, error])).values(),
+		];
+
+		if (uniqueErrors?.length === 1) {
+			return uniqueErrors[0]?.message;
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map(
+					(error, index) =>
+						error?.message && <li key={index}>{error.message}</li>,
+				)}
+			</ul>
+		);
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn("text-destructive text-sm font-normal", className)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+}
+
+export {
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
+};

src/shared/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function HoverCard({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return (
+		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
+}
+
+function HoverCardContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

src/shared/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };

src/shared/components/ui/item.tsx

@@ -0,0 +1,192 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Separator } from "@/shared/components/ui/separator";
+import { cn } from "@/shared/utils";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			role="list"
+			data-slot="item-group"
+			className={cn("group/item-group flex flex-col", className)}
+			{...props}
+		/>
+	);
+}
+
+function ItemSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="item-separator"
+			orientation="horizontal"
+			className={cn("my-0", className)}
+			{...props}
+		/>
+	);
+}
+
+const itemVariants = cva(
+	"group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50",
+			},
+			size: {
+				default: "p-4 gap-4 ",
+				sm: "py-3 px-4 gap-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Item({
+	className,
+	variant = "default",
+	size = "default",
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> &
+	VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+	return (
+		<Comp
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+const itemMediaVariants = cva(
+	"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+				image:
+					"size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function ItemMedia({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+	return (
+		<div
+			data-slot="item-media"
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-content"
+			className={cn(
+				"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-title"
+			className={cn(
+				"flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+				"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-actions"
+			className={cn("flex items-center gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-header"
+			className={cn(
+				"flex basis-full items-center justify-between gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn(
+				"flex basis-full items-center justify-between gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Item,
+	ItemMedia,
+	ItemContent,
+	ItemActions,
+	ItemGroup,
+	ItemSeparator,
+	ItemTitle,
+	ItemDescription,
+	ItemHeader,
+	ItemFooter,
+};

src/shared/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-xs leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

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

@@ -0,0 +1,220 @@
+"use client";
+import { RiArrowLeftSFill, RiArrowRightSFill } from "@remixicon/react";
+import * as React from "react";
+import { cn } from "@/shared/utils/ui";
+import { buttonVariants } from "./button";
+
+type Month = {
+	number: number;
+	name: string;
+};
+
+const MONTHS: Month[][] = [
+	[
+		{ number: 0, name: "Jan" },
+		{ number: 1, name: "Fev" },
+		{ number: 2, name: "Mar" },
+		{ number: 3, name: "Abr" },
+	],
+	[
+		{ number: 4, name: "Mai" },
+		{ number: 5, name: "Jun" },
+		{ number: 6, name: "Jul" },
+		{ number: 7, name: "Ago" },
+	],
+	[
+		{ number: 8, name: "Set" },
+		{ number: 9, name: "Out" },
+		{ number: 10, name: "Nov" },
+		{ number: 11, name: "Dez" },
+	],
+];
+
+type MonthCalProps = {
+	selectedMonth?: Date;
+	onMonthSelect?: (date: Date) => void;
+	onYearForward?: () => void;
+	onYearBackward?: () => void;
+	callbacks?: {
+		yearLabel?: (year: number) => string;
+		monthLabel?: (month: Month) => string;
+	};
+	variant?: {
+		calendar?: {
+			main?: ButtonVariant;
+			selected?: ButtonVariant;
+		};
+		chevrons?: ButtonVariant;
+	};
+	minDate?: Date;
+	maxDate?: Date;
+	disabledDates?: Date[];
+};
+
+type ButtonVariant =
+	| "default"
+	| "outline"
+	| "ghost"
+	| "link"
+	| "destructive"
+	| "secondary"
+	| null
+	| undefined;
+
+function MonthPicker({
+	onMonthSelect,
+	selectedMonth,
+	minDate,
+	maxDate,
+	disabledDates,
+	callbacks,
+	onYearBackward,
+	onYearForward,
+	variant,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & MonthCalProps) {
+	return (
+		<div className={cn("min-w-[200px] w-[280px] p-3", className)} {...props}>
+			<div className="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0">
+				<div className="space-y-4 w-full">
+					<MonthCal
+						onMonthSelect={onMonthSelect}
+						callbacks={callbacks}
+						selectedMonth={selectedMonth}
+						onYearBackward={onYearBackward}
+						onYearForward={onYearForward}
+						variant={variant}
+						minDate={minDate}
+						maxDate={maxDate}
+						disabledDates={disabledDates}
+					></MonthCal>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function MonthCal({
+	selectedMonth,
+	onMonthSelect,
+	callbacks,
+	variant,
+	minDate,
+	maxDate,
+	disabledDates,
+	onYearBackward,
+	onYearForward,
+}: MonthCalProps) {
+	const [year, setYear] = React.useState<number>(
+		selectedMonth?.getFullYear() ?? new Date().getFullYear(),
+	);
+	const [month, setMonth] = React.useState<number>(
+		selectedMonth?.getMonth() ?? new Date().getMonth(),
+	);
+	const [menuYear, setMenuYear] = React.useState<number>(year);
+
+	if (minDate && maxDate && minDate > maxDate) minDate = maxDate;
+
+	const disabledDatesMapped = disabledDates?.map((d) => {
+		return { year: d.getFullYear(), month: d.getMonth() };
+	});
+
+	return (
+		<>
+			<div className="flex justify-center pt-1 relative items-center">
+				<div className="text-sm font-bold">
+					{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}
+				</div>
+				<div className="space-x-1 flex items-center">
+					<button
+						onClick={() => {
+							setMenuYear(menuYear - 1);
+							if (onYearBackward) onYearBackward();
+						}}
+						className={cn(
+							buttonVariants({ variant: variant?.chevrons ?? "outline" }),
+							"inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1",
+						)}
+					>
+						<RiArrowLeftSFill className="opacity-50 size-4" />
+					</button>
+					<button
+						onClick={() => {
+							setMenuYear(menuYear + 1);
+							if (onYearForward) onYearForward();
+						}}
+						className={cn(
+							buttonVariants({ variant: variant?.chevrons ?? "outline" }),
+							"inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1",
+						)}
+					>
+						<RiArrowRightSFill className="opacity-50 size-4" />
+					</button>
+				</div>
+			</div>
+			<table className="w-full border-collapse space-y-1">
+				<tbody>
+					{MONTHS.map((monthRow, a) => {
+						return (
+							<tr key={`row-${a}`} className="flex w-full mt-2">
+								{monthRow.map((m) => {
+									return (
+										<td
+											key={m.number}
+											className="h-10 w-1/4 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20"
+										>
+											<button
+												onClick={() => {
+													setMonth(m.number);
+													setYear(menuYear);
+													if (onMonthSelect)
+														onMonthSelect(new Date(menuYear, m.number));
+												}}
+												disabled={
+													(maxDate
+														? menuYear > maxDate?.getFullYear() ||
+															(menuYear === maxDate?.getFullYear() &&
+																m.number > maxDate.getMonth())
+														: false) ||
+													(minDate
+														? menuYear < minDate?.getFullYear() ||
+															(menuYear === minDate?.getFullYear() &&
+																m.number < minDate.getMonth())
+														: false) ||
+													(disabledDatesMapped
+														? disabledDatesMapped?.some(
+																(d) =>
+																	d.year === menuYear && d.month === m.number,
+															)
+														: false)
+												}
+												className={cn(
+													buttonVariants({
+														variant:
+															month === m.number && menuYear === year
+																? (variant?.calendar?.selected ?? "default")
+																: (variant?.calendar?.main ?? "ghost"),
+													}),
+													"h-full w-full p-0 font-normal aria-selected:opacity-100",
+												)}
+											>
+												{callbacks?.monthLabel
+													? callbacks.monthLabel(m)
+													: m.name}
+											</button>
+										</td>
+									);
+								})}
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</>
+	);
+}
+
+MonthPicker.displayName = "MonthPicker";
+
+export { MonthPicker };

src/shared/components/ui/navigation-menu.tsx

@@ -0,0 +1,167 @@
+import { RiArrowDropDownLine } from "@remixicon/react";
+import { cva } from "class-variance-authority";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/shared/utils";
+
+function NavigationMenu({
+	className,
+	children,
+	viewport = true,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+	viewport?: boolean;
+}) {
+	return (
+		<NavigationMenuPrimitive.Root
+			data-slot="navigation-menu"
+			data-viewport={viewport}
+			className={cn(
+				"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{viewport && <NavigationMenuViewport />}
+		</NavigationMenuPrimitive.Root>
+	);
+}
+
+function NavigationMenuList({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+	return (
+		<NavigationMenuPrimitive.List
+			data-slot="navigation-menu-list"
+			className={cn(
+				"group flex flex-1 list-none items-center justify-center gap-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuItem({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+	return (
+		<NavigationMenuPrimitive.Item
+			data-slot="navigation-menu-item"
+			className={cn("relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const navigationMenuTriggerStyle = cva(
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+	return (
+		<NavigationMenuPrimitive.Trigger
+			data-slot="navigation-menu-trigger"
+			className={cn(navigationMenuTriggerStyle(), "group", className)}
+			{...props}
+		>
+			{children}{" "}
+			<RiArrowDropDownLine
+				className="relative top-px size-5 opacity-70 transition duration-300 group-data-[state=open]:rotate-180"
+				aria-hidden="true"
+			/>
+		</NavigationMenuPrimitive.Trigger>
+	);
+}
+
+function NavigationMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+	return (
+		<NavigationMenuPrimitive.Content
+			data-slot="navigation-menu-content"
+			className={cn(
+				"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+				"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow-none group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuViewport({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+	return (
+		<div
+			className={cn(
+				"absolute top-full left-0 isolate z-50 flex justify-center",
+			)}
+		>
+			<NavigationMenuPrimitive.Viewport
+				data-slot="navigation-menu-viewport"
+				className={cn(
+					"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function NavigationMenuLink({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+	return (
+		<NavigationMenuPrimitive.Link
+			data-slot="navigation-menu-link"
+			className={cn(
+				"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuIndicator({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+	return (
+		<NavigationMenuPrimitive.Indicator
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+				className,
+			)}
+			{...props}
+		>
+			<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+		</NavigationMenuPrimitive.Indicator>
+	);
+}
+
+export {
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuContent,
+	NavigationMenuTrigger,
+	NavigationMenuLink,
+	NavigationMenuIndicator,
+	NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+};

src/shared/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverAnchor({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/shared/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Progress({
+	className,
+	value,
+	...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn(
+				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</ProgressPrimitive.Root>
+	);
+}
+
+export { Progress };

src/shared/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { RiCircleLine } from "@remixicon/react";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function RadioGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+	return (
+		<RadioGroupPrimitive.Root
+			data-slot="radio-group"
+			className={cn("grid gap-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function RadioGroupItem({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+	return (
+		<RadioGroupPrimitive.Item
+			data-slot="radio-group-item"
+			className={cn(
+				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				className="relative flex items-center justify-center"
+			>
+				<RiCircleLine className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+}
+
+export { RadioGroup, RadioGroupItem };

src/shared/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+	RiArrowDownSLine,
+	RiArrowUpSLine,
+	RiCheckLine,
+} from "@remixicon/react";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function Select({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+	className,
+	size = "default",
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap  transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<RiArrowDownSLine className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({
+	className,
+	children,
+	position = "popper",
+	align = "center",
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<RiCheckLine className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<RiArrowUpSLine className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<RiArrowDownSLine className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

src/shared/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

src/shared/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { RiCloseLine } from "@remixicon/react";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left";
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<RiCloseLine className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+};

src/shared/components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { RiLayoutLeft2Line } from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { Separator } from "@/shared/components/ui/separator";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "@/shared/components/ui/sheet";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/utils/ui";
+import { useIsMobile } from "./use-mobile";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+}) {
+	const { state, openMobile, setOpenMobile } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+
+			<div
+				className="group peer text-sidebar-foreground hidden md:block"
+				data-state={state}
+				data-collapsible={state === "collapsed" ? collapsible : ""}
+				data-variant={variant}
+				data-side={side}
+				data-slot="sidebar"
+			>
+				{/* This is what handles the sidebar gap on desktop */}
+				<div
+					data-slot="sidebar-gap"
+					className={cn(
+						"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+						"group-data-[collapsible=offcanvas]:w-0",
+						"group-data-[side=right]:rotate-180",
+						variant === "floating" || variant === "inset"
+							? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+							: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+					)}
+				/>
+				<div
+					data-slot="sidebar-container"
+					className={cn(
+						"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+						side === "left"
+							? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+							: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+						// Adjust the padding for floating and inset variants.
+						variant === "floating" || variant === "inset"
+							? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+							: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l",
+						className,
+					)}
+					{...props}
+				>
+					<div
+						data-sidebar="sidebar"
+						data-slot="sidebar-inner"
+						className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+					>
+						{children}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<RiLayoutLeft2Line />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInput({
+	className,
+	...props
+}: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn(
+				"relative flex w-full min-w-0 flex-col px-2 py-1",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupContent({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function SidebarMenuButton({
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
+}
+
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuBadge({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: React.ComponentProps<"div"> & {
+	showIcon?: boolean;
+}) {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubItem({
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubButton({
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};

src/shared/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/shared/utils/ui";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("bg-accent animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };

src/shared/components/ui/slider.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Slider as SliderPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/shared/utils/ui";
+
+function Slider({
+	className,
+	...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+	return (
+		<SliderPrimitive.Root
+			data-slot="slider"
+			className={cn(
+				"relative flex w-full touch-none items-center select-none",
+				className,
+			)}
+			{...props}
+		>
+			<SliderPrimitive.Track
+				data-slot="slider-track"
+				className="bg-muted relative h-2 w-full grow overflow-hidden rounded-full"
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					className="bg-primary absolute h-full"
+				/>
+			</SliderPrimitive.Track>
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-colors focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+			/>
+		</SliderPrimitive.Root>
+	);
+}
+
+export { Slider };

src/shared/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+	RiAlertLine,
+	RiCheckboxCircleLine,
+	RiCloseCircleLine,
+	RiInformationLine,
+	RiLoader4Line,
+} from "@remixicon/react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			icons={{
+				success: <RiCheckboxCircleLine className="size-4" />,
+				info: <RiInformationLine className="size-4" />,
+				warning: <RiAlertLine className="size-4" />,
+				error: <RiCloseCircleLine className="size-4" />,
+				loading: <RiLoader4Line className="size-4 animate-spin" />,
+			}}
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+					"--border-radius": "var(--radius)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

src/shared/components/ui/spinner.tsx

@@ -0,0 +1,15 @@
+import { RiLoader4Line } from "@remixicon/react";
+import { cn } from "@/shared/utils/ui";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+	return (
+		<RiLoader4Line
+			role="status"
+			aria-label="Loading"
+			className={cn("size-4 animate-spin", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Spinner };

src/shared/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Switch({
+	className,
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };

src/shared/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-dashed transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({
+	className,
+	...props
+}: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+};

src/shared/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Tabs({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsList({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			className={cn(
+				"text-muted-foreground inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative inline-flex h-9 items-center justify-center rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pt-2 pb-3 text-sm font-semibold whitespace-nowrap shadow-none transition-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

src/shared/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full wrap-break-word rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

src/shared/components/ui/toggle-group.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "@/shared/components/ui/toggle";
+import { cn } from "@/shared/utils/ui";
+
+const ToggleGroupContext = React.createContext<
+	VariantProps<typeof toggleVariants>
+>({
+	size: "default",
+	variant: "default",
+});
+
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<ToggleGroupPrimitive.Root
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			className={cn(
+				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size }}>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
+}
+
+function ToggleGroupItem({
+	className,
+	children,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+	VariantProps<typeof toggleVariants>) {
+	const context = React.useContext(ToggleGroupContext);
+
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
+}
+
+export { ToggleGroup, ToggleGroupItem };

src/shared/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Toggle, toggleVariants };

src/shared/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "@/shared/utils/ui";
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/shared/components/ui/use-mobile.ts

@@ -0,0 +1 @@
+export { useIsMobile, useMobile } from "@/shared/hooks/use-mobile";

src/shared/components/widget-card.tsx

@@ -0,0 +1,60 @@
+import type * as React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import { Separator } from "@/shared/components/ui/separator";
+
+export type WidgetCardProps = {
+	title: string;
+	subtitle: string;
+	children: React.ReactNode;
+	icon: React.ReactNode;
+	action?: React.ReactNode;
+};
+
+type WidgetCardShellProps = WidgetCardProps & {
+	contentClassName?: string;
+	contentRef?: React.Ref<HTMLDivElement>;
+	overlay?: React.ReactNode;
+};
+
+export default function WidgetCard({
+	title,
+	subtitle,
+	icon,
+	children,
+	action,
+	contentClassName,
+	contentRef,
+	overlay,
+}: WidgetCardShellProps) {
+	return (
+		<Card className="relative gap-2 overflow-hidden md:h-custom-height-card">
+			<CardHeader>
+				<div className="flex w-full items-start justify-between">
+					<div>
+						<CardTitle className="flex items-center gap-1 tracking-tighter lowercase">
+							<span className="size-4">{icon}</span>
+							{title}
+						</CardTitle>
+						<CardDescription className="text-muted-foreground text-sm lowercase mt-2">
+							{subtitle}
+						</CardDescription>
+					</div>
+					{action && <div className="shrink-0">{action}</div>}
+				</div>
+				<Separator className="mt-1" />
+			</CardHeader>
+
+			<CardContent ref={contentRef} className={contentClassName}>
+				{children}
+			</CardContent>
+
+			{overlay}
+		</Card>
+	);
+}

src/shared/components/widget-empty-state.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/shared/components/ui/empty";
+
+type WidgetEmptyStateProps = {
+	icon?: ReactNode;
+	title: string;
+	description?: string;
+};
+
+export function WidgetEmptyState({
+	icon,
+	title,
+	description,
+}: WidgetEmptyStateProps) {
+	return (
+		<Empty>
+			<EmptyHeader>
+				<EmptyMedia>{icon}</EmptyMedia>
+				<EmptyTitle>{title}</EmptyTitle>
+				<EmptyDescription>{description}</EmptyDescription>
+			</EmptyHeader>
+		</Empty>
+	);
+}

src/shared/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useControlledState } from "./use-controlled-state";
+export { useFormState } from "./use-form-state";
+export { useIsMobile, useMobile } from "./use-mobile";

src/shared/hooks/use-controlled-state.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Hook for managing controlled/uncontrolled state pattern
+ * Allows a component to work both in controlled and uncontrolled mode
+ *
+ * @param controlledValue - The controlled value (undefined for uncontrolled mode)
+ * @param defaultValue - Default value for uncontrolled mode
+ * @param onChange - Callback when value changes
+ * @returns Tuple of [currentValue, setValue]
+ *
+ * @example
+ * ```tsx
+ * function MyComponent({ value, onChange }) {
+ *   const [internalValue, setValue] = useControlledState(value, false, onChange);
+ *   // Works both as controlled and uncontrolled
+ * }
+ * ```
+ */
+export function useControlledState<T>(
+	controlledValue: T | undefined,
+	defaultValue: T,
+	onChange?: (value: T) => void,
+): [T, (value: T) => void] {
+	const [internalValue, setInternalValue] = useState<T>(defaultValue);
+
+	// Sync internal value when controlled value changes
+	useEffect(() => {
+		if (controlledValue !== undefined) {
+			setInternalValue(controlledValue);
+		}
+	}, [controlledValue]);
+
+	// Use controlled value if provided, otherwise use internal value
+	const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+	const setValue = useCallback(
+		(newValue: T) => {
+			// Update internal state if uncontrolled
+			if (controlledValue === undefined) {
+				setInternalValue(newValue);
+			}
+
+			// Always call onChange if provided
+			onChange?.(newValue);
+		},
+		[controlledValue, onChange],
+	);
+
+	return [value, setValue];
+}