feat(dashboard): add quick actions and new overview widgets

2026-03-02 17:20:28 +00:00
parent 3d3a9e1414
commit 2a21bef2da
21 changed files with 1166 additions and 116 deletions
--- a/components/dashboard/dashboard-grid-editable.tsx
+++ b/components/dashboard/dashboard-grid-editable.tsx
@@ -1,7 +1,7 @@
 "use client";

 import {
-	closestCenter,
+	closestCorners,
 	DndContext,
 	type DragEndEvent,
 	KeyboardSensor,
@@ -16,15 +16,21 @@ import {
 	sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
 import {
+	RiArrowDownLine,
+	RiArrowUpLine,
 	RiCheckLine,
 	RiCloseLine,
 	RiDragMove2Line,
 	RiEyeOffLine,
+	RiTodoLine,
 } from "@remixicon/react";
 import { useCallback, useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
+import { NoteDialog } from "@/components/anotacoes/note-dialog";
 import { SortableWidget } from "@/components/dashboard/sortable-widget";
 import { WidgetSettingsDialog } from "@/components/dashboard/widget-settings-dialog";
+import { LancamentoDialog } from "@/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog";
+import type { SelectOption } from "@/components/lancamentos/types";
 import { Button } from "@/components/ui/button";
 import WidgetCard from "@/components/widget-card";
 import type { DashboardData } from "@/lib/dashboard/fetch-dashboard-data";
@@ -42,12 +48,22 @@ type DashboardGridEditableProps = {
 	data: DashboardData;
 	period: string;
 	initialPreferences: WidgetPreferences | null;
+	quickActionOptions: {
+		pagadorOptions: SelectOption[];
+		splitPagadorOptions: SelectOption[];
+		defaultPagadorId: string | null;
+		contaOptions: SelectOption[];
+		cartaoOptions: SelectOption[];
+		categoriaOptions: SelectOption[];
+		estabelecimentos: string[];
+	};
 };

 export function DashboardGridEditable({
 	data,
 	period,
 	initialPreferences,
+	quickActionOptions,
 }: DashboardGridEditableProps) {
 	const [isEditing, setIsEditing] = useState(false);
 	const [isPending, startTransition] = useTransition();
@@ -183,53 +199,112 @@ export function DashboardGridEditable({
 	return (
 		<div className="space-y-4">
 			{/* Toolbar */}
-			<div className="flex items-center justify-end gap-2">
-				{isEditing ? (
-					<>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={handleCancelEditing}
-							disabled={isPending}
-							className="gap-2"
-						>
-							<RiCloseLine className="size-4" />
-							Cancelar
-						</Button>
-						<Button
-							size="sm"
-							onClick={handleSave}
-							disabled={isPending}
-							className="gap-2"
-						>
-							<RiCheckLine className="size-4" />
-							Salvar
-						</Button>
-					</>
+			<div className="flex flex-wrap items-center justify-between gap-2">
+				{!isEditing ? (
+					<div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
+						<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+							Ação rápida
+						</span>
+						<div className="-mb-1 flex items-center gap-2 overflow-x-auto pb-1 sm:mb-0 sm:overflow-visible sm:pb-0">
+							<LancamentoDialog
+								mode="create"
+								pagadorOptions={quickActionOptions.pagadorOptions}
+								splitPagadorOptions={quickActionOptions.splitPagadorOptions}
+								defaultPagadorId={quickActionOptions.defaultPagadorId}
+								contaOptions={quickActionOptions.contaOptions}
+								cartaoOptions={quickActionOptions.cartaoOptions}
+								categoriaOptions={quickActionOptions.categoriaOptions}
+								estabelecimentos={quickActionOptions.estabelecimentos}
+								defaultPeriod={period}
+								defaultTransactionType="Receita"
+								trigger={
+									<Button size="sm" variant="outline" className="gap-2">
+										<RiArrowUpLine className="size-4 text-success/80" />
+										Nova receita
+									</Button>
+								}
+							/>
+							<LancamentoDialog
+								mode="create"
+								pagadorOptions={quickActionOptions.pagadorOptions}
+								splitPagadorOptions={quickActionOptions.splitPagadorOptions}
+								defaultPagadorId={quickActionOptions.defaultPagadorId}
+								contaOptions={quickActionOptions.contaOptions}
+								cartaoOptions={quickActionOptions.cartaoOptions}
+								categoriaOptions={quickActionOptions.categoriaOptions}
+								estabelecimentos={quickActionOptions.estabelecimentos}
+								defaultPeriod={period}
+								defaultTransactionType="Despesa"
+								trigger={
+									<Button size="sm" variant="outline" className="gap-2">
+										<RiArrowDownLine className="size-4 text-destructive/80" />
+										Nova despesa
+									</Button>
+								}
+							/>
+							<NoteDialog
+								mode="create"
+								trigger={
+									<Button size="sm" variant="outline" className="gap-2">
+										<RiTodoLine className="size-4 text-info/80" />
+										Nova anotação
+									</Button>
+								}
+							/>
+						</div>
+					</div>
 				) : (
-					<>
-						<WidgetSettingsDialog
-							hiddenWidgets={hiddenWidgets}
-							onToggleWidget={handleToggleWidget}
-							onReset={handleReset}
-						/>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={handleStartEditing}
-							className="gap-2"
-						>
-							<RiDragMove2Line className="size-4" />
-							Reordenar
-						</Button>
-					</>
+					<div />
 				)}
+
+				<div className="flex items-center gap-2">
+					{isEditing ? (
+						<>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={handleCancelEditing}
+								disabled={isPending}
+								className="gap-2"
+							>
+								<RiCloseLine className="size-4" />
+								Cancelar
+							</Button>
+							<Button
+								size="sm"
+								onClick={handleSave}
+								disabled={isPending}
+								className="gap-2"
+							>
+								<RiCheckLine className="size-4" />
+								Salvar
+							</Button>
+						</>
+					) : (
+						<>
+							<WidgetSettingsDialog
+								hiddenWidgets={hiddenWidgets}
+								onToggleWidget={handleToggleWidget}
+								onReset={handleReset}
+							/>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={handleStartEditing}
+								className="gap-2"
+							>
+								<RiDragMove2Line className="size-4" />
+								Reordenar
+							</Button>
+						</>
+					)}
+				</div>
 			</div>

 			{/* Grid */}
 			<DndContext
 				sensors={sensors}
-				collisionDetection={closestCenter}
+				collisionDetection={closestCorners}
 				onDragEnd={handleDragEnd}
 			>
 				<SortableContext
--- a/components/dashboard/goals-progress-widget.tsx
+++ b/components/dashboard/goals-progress-widget.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { RiFundsLine, RiPencilLine } from "@remixicon/react";
+import { useCallback, useMemo, useState } from "react";
+import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
+import MoneyValues from "@/components/money-values";
+import { BudgetDialog } from "@/components/orcamentos/budget-dialog";
+import type { Budget, BudgetCategory } from "@/components/orcamentos/types";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import type { GoalsProgressData } from "@/lib/dashboard/goals-progress";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type GoalsProgressWidgetProps = {
+	data: GoalsProgressData;
+};
+
+const clamp = (value: number, min: number, max: number) =>
+	Math.min(max, Math.max(min, value));
+
+const formatPercentage = (value: number, withSign = false) =>
+	`${new Intl.NumberFormat("pt-BR", {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 1,
+		...(withSign ? { signDisplay: "always" as const } : {}),
+	}).format(value)}%`;
+
+export function GoalsProgressWidget({ data }: GoalsProgressWidgetProps) {
+	const [editOpen, setEditOpen] = useState(false);
+	const [selectedBudget, setSelectedBudget] = useState<Budget | null>(null);
+
+	const categories = useMemo<BudgetCategory[]>(
+		() =>
+			data.categories.map((category) => ({
+				id: category.id,
+				name: category.name,
+				icon: category.icon,
+			})),
+		[data.categories],
+	);
+
+	const defaultPeriod = data.items[0]?.period ?? "";
+
+	const handleEdit = useCallback((item: GoalsProgressData["items"][number]) => {
+		setSelectedBudget({
+			id: item.id,
+			amount: item.budgetAmount,
+			spent: item.spentAmount,
+			period: item.period,
+			createdAt: item.createdAt,
+			category: item.categoryId
+				? {
+						id: item.categoryId,
+						name: item.categoryName,
+						icon: item.categoryIcon,
+					}
+				: null,
+		});
+		setEditOpen(true);
+	}, []);
+
+	const handleEditOpenChange = useCallback((open: boolean) => {
+		setEditOpen(open);
+		if (!open) {
+			setSelectedBudget(null);
+		}
+	}, []);
+
+	if (data.items.length === 0) {
+		return (
+			<WidgetEmptyState
+				icon={<RiFundsLine className="size-6 text-muted-foreground" />}
+				title="Nenhum orçamento para o período"
+				description="Cadastre orçamentos para acompanhar o progresso das metas."
+			/>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-4 px-0">
+			<ul className="flex flex-col">
+				{data.items.map((item, index) => {
+					const statusColor =
+						item.status === "exceeded" ? "text-destructive" : "";
+					const progressValue = clamp(item.usedPercentage, 0, 100);
+					const percentageDelta = item.usedPercentage - 100;
+
+					return (
+						<li
+							key={item.id}
+							className="border-b border-dashed py-2 last:border-b-0 last:pb-0"
+						>
+							<div className="flex items-start justify-between gap-3">
+								<div className="flex min-w-0 flex-1 items-start gap-2">
+									<CategoryIconBadge
+										icon={item.categoryIcon}
+										name={item.categoryName}
+										colorIndex={index}
+										size="md"
+									/>
+									<div className="min-w-0 flex-1">
+										<p className="truncate text-sm font-medium text-foreground">
+											{item.categoryName}
+										</p>
+										<p className="mt-0.5 text-xs text-muted-foreground">
+											<MoneyValues amount={item.spentAmount} /> de{" "}
+											<MoneyValues amount={item.budgetAmount} />
+										</p>
+									</div>
+								</div>
+
+								<div className="flex shrink-0 items-center gap-2">
+									<span className={`text-xs font-medium ${statusColor}`}>
+										{formatPercentage(percentageDelta, true)}
+									</span>
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon-sm"
+										className="size-7 text-muted-foreground hover:text-foreground"
+										onClick={() => handleEdit(item)}
+										aria-label={`Editar orçamento de ${item.categoryName}`}
+									>
+										<RiPencilLine className="size-3.5" />
+									</Button>
+								</div>
+							</div>
+							<div className="mt-1.5 ml-11">
+								<Progress value={progressValue} />
+							</div>
+						</li>
+					);
+				})}
+			</ul>
+
+			<BudgetDialog
+				mode="update"
+				budget={selectedBudget ?? undefined}
+				categories={categories}
+				defaultPeriod={defaultPeriod}
+				open={editOpen && !!selectedBudget}
+				onOpenChange={handleEditOpenChange}
+			/>
+		</div>
+	);
+}
--- a/components/dashboard/notes-widget.tsx
+++ b/components/dashboard/notes-widget.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { RiEyeLine, RiPencilLine, RiTodoLine } from "@remixicon/react";
+import { useCallback, useMemo, useState } from "react";
+import { NoteDetailsDialog } from "@/components/anotacoes/note-details-dialog";
+import { NoteDialog } from "@/components/anotacoes/note-dialog";
+import type { Note } from "@/components/anotacoes/types";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import type { DashboardNote } from "@/lib/dashboard/notes";
+import { Badge } from "../ui/badge";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type NotesWidgetProps = {
+	notes: DashboardNote[];
+};
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
+	day: "2-digit",
+	month: "short",
+	year: "numeric",
+	timeZone: "UTC",
+});
+
+const buildDisplayTitle = (value: string) => {
+	const trimmed = value.trim();
+	return trimmed.length ? trimmed : "Anotação sem título";
+};
+
+const mapDashboardNoteToNote = (note: DashboardNote): Note => ({
+	id: note.id,
+	title: note.title,
+	description: note.description,
+	type: note.type,
+	tasks: note.tasks,
+	arquivada: note.arquivada,
+	createdAt: note.createdAt,
+});
+
+const getTasksSummary = (note: DashboardNote) => {
+	if (note.type !== "tarefa") {
+		return "Nota";
+	}
+
+	const tasks = note.tasks ?? [];
+	const completed = tasks.filter((task) => task.completed).length;
+	return `${completed}/${tasks.length} concluídas`;
+};
+
+export function NotesWidget({ notes }: NotesWidgetProps) {
+	const [noteToEdit, setNoteToEdit] = useState<Note | null>(null);
+	const [isEditOpen, setIsEditOpen] = useState(false);
+	const [noteDetails, setNoteDetails] = useState<Note | null>(null);
+	const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+	const mappedNotes = useMemo(() => notes.map(mapDashboardNoteToNote), [notes]);
+
+	const handleOpenEdit = useCallback((note: Note) => {
+		setNoteToEdit(note);
+		setIsEditOpen(true);
+	}, []);
+
+	const handleOpenDetails = useCallback((note: Note) => {
+		setNoteDetails(note);
+		setIsDetailsOpen(true);
+	}, []);
+
+	const handleEditOpenChange = useCallback((open: boolean) => {
+		setIsEditOpen(open);
+		if (!open) {
+			setNoteToEdit(null);
+		}
+	}, []);
+
+	const handleDetailsOpenChange = useCallback((open: boolean) => {
+		setIsDetailsOpen(open);
+		if (!open) {
+			setNoteDetails(null);
+		}
+	}, []);
+
+	return (
+		<>
+			<CardContent className="flex flex-col gap-4 px-0">
+				{mappedNotes.length === 0 ? (
+					<WidgetEmptyState
+						icon={<RiTodoLine className="size-6 text-muted-foreground" />}
+						title="Nenhuma anotação ativa"
+						description="Crie anotações para acompanhar lembretes e tarefas financeiras."
+					/>
+				) : (
+					<ul className="flex flex-col">
+						{mappedNotes.map((note) => (
+							<li
+								key={note.id}
+								className="flex items-center justify-between gap-2 border-b border-dashed py-2 last:border-b-0 last:pb-0"
+							>
+								<div className="min-w-0 flex-1">
+									<p className="truncate text-sm font-medium text-foreground">
+										{buildDisplayTitle(note.title)}
+									</p>
+									<div className="mt-1 flex items-center gap-2">
+										<Badge
+											variant="secondary"
+											className="h-5 px-1.5 text-[10px]"
+										>
+											{getTasksSummary(note)}
+										</Badge>
+										<p className="truncate text-xs text-muted-foreground">
+											{DATE_FORMATTER.format(new Date(note.createdAt))}
+										</p>
+									</div>
+								</div>
+
+								<div className="flex shrink-0 items-center">
+									<Button
+										variant="ghost"
+										size="icon-sm"
+										className="text-muted-foreground hover:text-foreground"
+										onClick={() => handleOpenEdit(note)}
+										aria-label={`Editar anotação ${buildDisplayTitle(note.title)}`}
+									>
+										<RiPencilLine className="size-4" />
+									</Button>
+									<Button
+										variant="ghost"
+										size="icon-sm"
+										className="text-muted-foreground hover:text-foreground"
+										onClick={() => handleOpenDetails(note)}
+										aria-label={`Ver detalhes da anotação ${buildDisplayTitle(
+											note.title,
+										)}`}
+									>
+										<RiEyeLine className="size-4" />
+									</Button>
+								</div>
+							</li>
+						))}
+					</ul>
+				)}
+			</CardContent>
+
+			<NoteDialog
+				mode="update"
+				note={noteToEdit ?? undefined}
+				open={isEditOpen}
+				onOpenChange={handleEditOpenChange}
+			/>
+
+			<NoteDetailsDialog
+				note={noteDetails}
+				open={isDetailsOpen}
+				onOpenChange={handleDetailsOpenChange}
+			/>
+		</>
+	);
+}
--- a/components/dashboard/pagadores-widget.tsx
+++ b/components/dashboard/pagadores-widget.tsx
@@ -1,6 +1,8 @@
 "use client";

 import {
+	RiArrowDownSFill,
+	RiArrowUpSFill,
 	RiExternalLinkLine,
 	RiGroupLine,
 	RiVerifiedBadgeFill,
@@ -17,6 +19,10 @@ type PagadoresWidgetProps = {
 	pagadores: DashboardPagador[];
 };

+const formatPercentage = (value: number) => {
+	return `${Math.abs(value).toFixed(0)}%`;
+};
+
 const buildInitials = (value: string) => {
 	const parts = value.trim().split(/\s+/).filter(Boolean);
 	if (parts.length === 0) {
@@ -44,6 +50,12 @@ export function PagadoresWidget({ pagadores }: PagadoresWidgetProps) {
 				<ul className="flex flex-col">
 					{pagadores.map((pagador) => {
 						const initials = buildInitials(pagador.name);
+						const hasValidPercentageChange =
+							typeof pagador.percentageChange === "number" &&
+							Number.isFinite(pagador.percentageChange);
+						const percentageChange = hasValidPercentageChange
+							? pagador.percentageChange
+							: null;

 						return (
 							<li
@@ -87,6 +99,25 @@ export function PagadoresWidget({ pagadores }: PagadoresWidgetProps) {

 								<div className="flex shrink-0 flex-col items-end">
 									<MoneyValues amount={pagador.totalExpenses} />
+									{percentageChange !== null && (
+										<span
+											className={`flex items-center gap-0.5 text-xs ${
+												percentageChange > 0
+													? "text-destructive"
+													: percentageChange < 0
+														? "text-success"
+														: "text-muted-foreground"
+											}`}
+										>
+											{percentageChange > 0 && (
+												<RiArrowUpSFill className="size-3" />
+											)}
+											{percentageChange < 0 && (
+												<RiArrowDownSFill className="size-3" />
+											)}
+											{formatPercentage(percentageChange)}
+										</span>
+									)}
 								</div>
 							</li>
 						);
--- a/components/dashboard/payment-overview-widget.tsx
+++ b/components/dashboard/payment-overview-widget.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { RiMoneyDollarCircleLine, RiSlideshowLine } from "@remixicon/react";
+import { useState } from "react";
+import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
+import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { PaymentConditionsWidget } from "./payment-conditions-widget";
+import { PaymentMethodsWidget } from "./payment-methods-widget";
+
+type PaymentOverviewWidgetProps = {
+	paymentConditionsData: PaymentConditionsData;
+	paymentMethodsData: PaymentMethodsData;
+};
+
+export function PaymentOverviewWidget({
+	paymentConditionsData,
+	paymentMethodsData,
+}: PaymentOverviewWidgetProps) {
+	const [activeTab, setActiveTab] = useState<"conditions" | "methods">(
+		"conditions",
+	);
+
+	return (
+		<Tabs
+			value={activeTab}
+			onValueChange={(value) => setActiveTab(value as "conditions" | "methods")}
+			className="w-full"
+		>
+			<TabsList className="grid grid-cols-2">
+				<TabsTrigger value="conditions" className="text-xs">
+					<RiSlideshowLine className="mr-1 size-3.5" />
+					Condições
+				</TabsTrigger>
+				<TabsTrigger value="methods" className="text-xs">
+					<RiMoneyDollarCircleLine className="mr-1 size-3.5" />
+					Formas
+				</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="conditions" className="mt-2">
+				<PaymentConditionsWidget data={paymentConditionsData} />
+			</TabsContent>
+
+			<TabsContent value="methods" className="mt-2">
+				<PaymentMethodsWidget data={paymentMethodsData} />
+			</TabsContent>
+		</Tabs>
+	);
+}
--- a/components/dashboard/sortable-widget.tsx
+++ b/components/dashboard/sortable-widget.tsx
@@ -37,7 +37,8 @@ export function SortableWidget({
 			className={cn(
 				"relative",
 				isDragging && "z-50 opacity-90",
-				isEditing && "cursor-grab active:cursor-grabbing",
+				isEditing &&
+					"cursor-grab active:cursor-grabbing touch-none select-none",
 			)}
 			{...(isEditing ? { ...attributes, ...listeners } : {})}
 		>
--- a/components/dashboard/spending-overview-widget.tsx
+++ b/components/dashboard/spending-overview-widget.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { RiArrowUpDoubleLine, RiStore2Line } from "@remixicon/react";
+import { useState } from "react";
+import type { TopExpensesData } from "@/lib/dashboard/expenses/top-expenses";
+import type { TopEstablishmentsData } from "@/lib/dashboard/top-establishments";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { TopEstablishmentsWidget } from "./top-establishments-widget";
+import { TopExpensesWidget } from "./top-expenses-widget";
+
+type SpendingOverviewWidgetProps = {
+	topExpensesAll: TopExpensesData;
+	topExpensesCardOnly: TopExpensesData;
+	topEstablishmentsData: TopEstablishmentsData;
+};
+
+export function SpendingOverviewWidget({
+	topExpensesAll,
+	topExpensesCardOnly,
+	topEstablishmentsData,
+}: SpendingOverviewWidgetProps) {
+	const [activeTab, setActiveTab] = useState<"expenses" | "establishments">(
+		"expenses",
+	);
+
+	return (
+		<Tabs
+			value={activeTab}
+			onValueChange={(value) =>
+				setActiveTab(value as "expenses" | "establishments")
+			}
+			className="w-full"
+		>
+			<TabsList className="grid grid-cols-2">
+				<TabsTrigger value="expenses" className="text-xs">
+					<RiArrowUpDoubleLine className="mr-1 size-3.5" />
+					Top gastos
+				</TabsTrigger>
+				<TabsTrigger value="establishments" className="text-xs">
+					<RiStore2Line className="mr-1 size-3.5" />
+					Estabelecimentos
+				</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="expenses" className="mt-2">
+				<TopExpensesWidget
+					allExpenses={topExpensesAll}
+					cardOnlyExpenses={topExpensesCardOnly}
+				/>
+			</TabsContent>
+
+			<TabsContent value="establishments" className="mt-2">
+				<TopEstablishmentsWidget data={topEstablishmentsData} />
+			</TabsContent>
+		</Tabs>
+	);
+}
--- a/components/navbar/nav-items.tsx
+++ b/components/navbar/nav-items.tsx
@@ -9,6 +9,7 @@ import {
 	RiGroupLine,
 	RiPriceTag3Line,
 	RiSparklingLine,
+	RiStore2Line,
 	RiTodoLine,
 } from "@remixicon/react";

@@ -110,6 +111,11 @@ export const NAV_SECTIONS: NavSection[] = [
 				icon: <RiBankCard2Line className="size-4" />,
 				preservePeriod: true,
 			},
+			{
+				href: "/relatorios/estabelecimentos",
+				label: "estabelecimentos",
+				icon: <RiStore2Line className="size-4" />,
+			},
 		],
 	},
 ];
--- a/components/orcamentos/budget-dialog.tsx
+++ b/components/orcamentos/budget-dialog.tsx
@@ -9,7 +9,6 @@ import {
 import { CategoryIcon } from "@/components/categorias/category-icon";
 import { PeriodPicker } from "@/components/period-picker";
 import { Button } from "@/components/ui/button";
-import { CurrencyInput } from "@/components/ui/currency-input";
 import {
 	Dialog,
 	DialogContent,
@@ -27,6 +26,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
 import { useControlledState } from "@/hooks/use-controlled-state";
 import { useFormState } from "@/hooks/use-form-state";

@@ -54,6 +54,12 @@ const buildInitialValues = ({
 	amount: budget ? (Math.round(budget.amount * 100) / 100).toFixed(2) : "",
 });

+const formatCurrency = (value: number) =>
+	new Intl.NumberFormat("pt-BR", {
+		style: "currency",
+		currency: "BRL",
+	}).format(value);
+
 export function BudgetDialog({
 	mode,
 	trigger,
@@ -164,6 +170,15 @@ export function BudgetDialog({
 	const submitLabel =
 		mode === "create" ? "Salvar orçamento" : "Atualizar orçamento";
 	const disabled = categories.length === 0;
+	const parsedAmount = Number.parseFloat(formState.amount);
+	const sliderValue = Number.isFinite(parsedAmount)
+		? Math.max(0, parsedAmount)
+		: 0;
+	const baseForSlider = Math.max(budget?.spent ?? 0, sliderValue, 1000);
+	const sliderMax = Math.max(
+		1000,
+		Math.ceil((baseForSlider * 1.5) / 100) * 100,
+	);

 	return (
 		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -215,7 +230,7 @@ export function BudgetDialog({
 							</Select>
 						</div>

-						<div className="grid gap-4 sm:grid-cols-2">
+						<div className="space-y-4">
 							<div className="space-y-2">
 								<Label htmlFor="budget-period">Período</Label>
 								<PeriodPicker
@@ -227,12 +242,30 @@ export function BudgetDialog({

 							<div className="space-y-2">
 								<Label htmlFor="budget-amount">Valor limite</Label>
-								<CurrencyInput
-									id="budget-amount"
-									placeholder="R$ 0,00"
-									value={formState.amount}
-									onValueChange={(value) => updateField("amount", value)}
-								/>
+								<div className="space-y-3 rounded-md border p-3">
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Limite atual</span>
+										<span className="font-semibold text-foreground">
+											{formatCurrency(sliderValue)}
+										</span>
+									</div>
+
+									<Slider
+										id="budget-amount"
+										value={[sliderValue]}
+										min={0}
+										max={sliderMax}
+										step={10}
+										onValueChange={(value) =>
+											updateField("amount", value[0]?.toFixed(2) ?? "0.00")
+										}
+									/>
+
+									<div className="flex items-center justify-between text-xs text-muted-foreground">
+										<span>{formatCurrency(0)}</span>
+										<span>{formatCurrency(sliderMax)}</span>
+									</div>
+								</div>
 							</div>
 						</div>

--- a/components/top-estabelecimentos/period-filter.tsx
+++ b/components/top-estabelecimentos/period-filter.tsx
@@ -22,7 +22,7 @@ export function PeriodFilterButtons({ currentFilter }: PeriodFilterProps) {
 	const handleFilterChange = (filter: PeriodFilter) => {
 		const params = new URLSearchParams(searchParams.toString());
 		params.set("meses", filter);
-		router.push(`/top-estabelecimentos?${params.toString()}`);
+		router.push(`/relatorios/estabelecimentos?${params.toString()}`);
 	};

 	return (
--- a/components/ui/slider.tsx
+++ b/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 "@/lib/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 };