ajuste de layout mobile, melhorias e criação de novas funções. Detalhes adicionados no CHANGELOG.md

app/(dashboard)/relatorios/gastos-por-categoria/layout.tsx

@@ -0,0 +1,23 @@
+import { RiPieChartLine } from "@remixicon/react";
+import PageDescription from "@/components/page-description";
+
+export const metadata = {
+	title: "Gastos por categoria | OpenMonetis",
+};
+
+export default function GastosPorCategoriaLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<section className="space-y-6 px-6">
+			<PageDescription
+				icon={<RiPieChartLine />}
+				title="Gastos por categoria"
+				subtitle="Visualize suas despesas divididas por categoria no mês selecionado. Altere o mês para comparar períodos."
+			/>
+			{children}
+		</section>
+	);
+}

app/(dashboard)/relatorios/gastos-por-categoria/loading.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function GastosPorCategoriaLoading() {
+	return (
+		<main className="flex flex-col gap-6">
+			<div className="h-14 animate-pulse rounded-xl bg-foreground/10" />
+
+			<div className="rounded-xl border p-4 md:p-6 space-y-4">
+				<div className="flex gap-2">
+					<Skeleton className="h-9 w-20 rounded-lg" />
+					<Skeleton className="h-9 w-20 rounded-lg" />
+				</div>
+				<div className="space-y-3 pt-4">
+					{Array.from({ length: 5 }).map((_, i) => (
+						<div key={i} className="flex items-center justify-between py-2 border-b border-dashed">
+							<div className="flex items-center gap-2">
+								<Skeleton className="size-10 rounded-lg" />
+								<div className="space-y-1">
+									<Skeleton className="h-4 w-28" />
+									<Skeleton className="h-3 w-24" />
+								</div>
+							</div>
+							<Skeleton className="h-5 w-20" />
+						</div>
+					))}
+				</div>
+			</div>
+		</main>
+	);
+}

app/(dashboard)/relatorios/gastos-por-categoria/page.tsx

@@ -0,0 +1,100 @@
+import {
+	RiArrowDownSFill,
+	RiArrowUpSFill,
+	RiPieChartLine,
+} from "@remixicon/react";
+import MonthNavigation from "@/components/month-picker/month-navigation";
+import { ExpensesByCategoryWidgetWithChart } from "@/components/dashboard/expenses-by-category-widget-with-chart";
+import MoneyValues from "@/components/money-values";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getUserId } from "@/lib/auth/server";
+import { fetchExpensesByCategory } from "@/lib/dashboard/categories/expenses-by-category";
+import { calculatePercentageChange } from "@/lib/utils/math";
+import { parsePeriodParam } from "@/lib/utils/period";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+	searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+	params: Record<string, string | string[] | undefined> | undefined,
+	key: string,
+) => {
+	const value = params?.[key];
+	if (!value) return null;
+	return Array.isArray(value) ? (value[0] ?? null) : value;
+};
+
+export default async function GastosPorCategoriaPage({
+	searchParams,
+}: PageProps) {
+	const userId = await getUserId();
+	const resolvedSearchParams = searchParams ? await searchParams : undefined;
+	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+
+	const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+	const data = await fetchExpensesByCategory(userId, selectedPeriod);
+	const percentageChange = calculatePercentageChange(
+		data.currentTotal,
+		data.previousTotal,
+	);
+	const hasIncrease = percentageChange !== null && percentageChange > 0;
+	const hasDecrease = percentageChange !== null && percentageChange < 0;
+
+	return (
+		<main className="flex flex-col gap-6">
+			<MonthNavigation />
+
+			<Card>
+				<CardHeader className="pb-2">
+					<CardTitle className="flex items-center gap-2 text-base">
+						<RiPieChartLine className="size-4 text-primary" />
+						Resumo do mês
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-1">
+					<div className="flex flex-wrap items-baseline justify-between gap-2">
+						<div>
+							<p className="text-xs text-muted-foreground">
+								Total de despesas no mês
+							</p>
+							<MoneyValues
+								amount={data.currentTotal}
+								className="text-2xl font-semibold"
+							/>
+						</div>
+						{percentageChange !== null && (
+							<span
+								className={`flex items-center gap-0.5 text-sm ${
+									hasIncrease
+										? "text-destructive"
+										: hasDecrease
+											? "text-success"
+											: "text-muted-foreground"
+								}`}
+							>
+								{hasIncrease && <RiArrowUpSFill className="size-4" />}
+								{hasDecrease && <RiArrowDownSFill className="size-4" />}
+								{percentageChange > 0 ? "+" : ""}
+								{percentageChange.toFixed(1)}% em relação ao mês anterior
+							</span>
+						)}
+					</div>
+					<p className="text-xs text-muted-foreground">
+						Mês anterior: <MoneyValues amount={data.previousTotal} />
+					</p>
+				</CardContent>
+			</Card>
+
+			<Card className="p-4 md:p-6">
+				<ExpensesByCategoryWidgetWithChart
+					data={data}
+					period={selectedPeriod}
+				/>
+			</Card>
+		</main>
+	);
+}